[gatsby-theme-i18n] Is there a way to get non-localized version of the current path?

[mi5ha]

This returns localized version:

const location = useLocation();

location.pathname

This non localized version of the current path is necessary when language switchers are created for example.

Thank you!

[coskuncakir]

Hello @mi5ha ,
you can get originalPath value from page context like below and pass it to the Language switcher component.
but, I'd like to know is there a way to do it in the Language switcher component without passing props from the page?

import React from "react" 
import Language from "../components/language"

export default function HomePage({ pageContext: { originalPath } }) {
  return (
    <>
      <Language originalPath={originalPath} />
    </>
  )
}

[coskuncakir]

Hello again :)
I was thinking a way to find originalPath without passing from the page. just get the current path and remove the language codes from that path. this doesn't seem like a bad method until you can get the original path with a hook etc. better than passing the originalPath from every page's context I think. here is my language switcher component if anyone needs it.

import React from "react"
import { useLocalization, LocalizedLink } from "gatsby-theme-i18n" 

export default function LanguageSwitcher() {
  const { locale, config } = useLocalization()

  // set original path
  let path = typeof window !== "undefined" ? window.location.pathname : ""
  config.forEach(item => (path = path.replace(`${item.code}/`, "")))

  return (
    <div>
      {config.map(lang => (
        <LocalizedLink to={path} key={lang.code} language={lang.code}>
          {lang.code.toUpperCase()}
        </LocalizedLink>
      ))}
    </div>
  )
}

[jwbargsten]

There is more than one way to do it, of course. Here a version adapted from gatsby-plugin-intl:

const buildLocalizedLink = (code) => {
  if (typeof window === "undefined") {
    return
  }

  const removePrefix = pathname => {
    const base =
      typeof __BASE_PATH__ !== `undefined` ? __BASE_PATH__ : __PATH_PREFIX__
    if (base && pathname.indexOf(base) === 0) {
      pathname = pathname.slice(base.length)
    }
    return pathname
  }

  const removeLocalePart = pathname => {
    const i = pathname.indexOf(`/`, 1)
    // return '' in case we are at the root of the language, e.g. '/en'
    return i < 0 ? '' : pathname.substring(i)
  }

  const pathname = removeLocalePart(removePrefix(window.location.pathname))
  return `/${code}${pathname}${window.location.search}`
}

const changeLocale = (code) => {
  const link = buildLocalizedLink(code)
  navigate(link, {replace: true});
}

With buildLocalizedLink you can build a localized link (surprise, surprise) of the page in a different locale (given by code arg). With changeLocale you can navigate to it using the gatsby navigate function. This code assumes that you are already on a localized page, so it removes the locale prefix without checking if it is indeed a language. I added the {replace: true} after reading Redirect based on browser language in Gatsby.