0

Сейчас делаю сайт с локализацией на 3-х языках. Переводы и кнопки для переключения уже настроил страницы переводятся.

Сейчас мне нужно добавить локализацию в URL для чтения гуглом , а именно при смене языка добавлять в урл название языка:

localhost/

localhost/de/general

localhost/ru/general

localhost/en/general

и т.д.

Проблема в том что я не понимаю как:

1)Правильно сделать что-бы не переписывать все свои урлы и линки()

2)Добавить в url localhost/{lang}/general

//Cейчас мои роуты выглядят вот так

 <Routes>
    <Route path={`:lang?/`} element={<Layout />}>
      <Route index element={<General />} />
      //TODO: Forum
      <Route path=":lang?/forum" element={<ForumGeneral />} />
      <Route path=":lang?/forum/:categoryID" element={<ForumCategory />} />
      <Route path=":lang?/forum/:categoryID/:postID" element={<ForumDetail />} />
      <Route
        path=":lang?/forum-post/edit/:postID"
        element={<PrivateRoute children={<CreatePost />} />}
      />
      <Route path=":lang?/forum-post/create" element={<PrivateRoute children={<CreatePost />} />} />
      //TODO: Motor Transport
      <Route path=":lang?/motorbike" element={<MotoTransport />} />
      <Route path=":lang?/motorbike/:postID" element={<DetailedMotorTransport />} />
      <Route
        path=":lang?/motorbike/create"
        element={<PrivateRoute children={<CreateMototransport />} />}
      />
      <Route
        path=":lang?/motorbike/edit/:postID"
        element={<PrivateRoute children={<CreateMototransport />} />}
      />
</Routes>

Я думал изначально придумал что можно в BrowserRouter прокидывать basename с моим дефолтным языком , но я не придумал как правильно динамически его подменять в зависимости от выбраного языка плюсом ко всему у меня нечего не получилось)

const Root = () => {
  const [baseName, setBaseName] = useState('/ru');
  
  return (
    <React.Fragment>
      <Provider store={store}>
        <PersistGate persistor={persistor}>
          <BrowserRouter basename={baseName}>
            <ThemeProvider>
              <App onChangeLanguage={setBaseName} />
              <GlobalStyle />
            </ThemeProvider>
          </BrowserRouter>
        </PersistGate>
      </Provider>
    </React.Fragment>
  );
};

переключение языка у меня происходит в компоненте layout вот таким образом

const handleChangeLanguage = value => {
    setLanguage(value);
    localStorage.setItem('i18nextLng', value);
  };

Вообщем нужен какой-то совет как правильно добавить этот функционал так как раньше я такое не делал и не понимаю как правильно это все провернуть.

Буду рад любым советам

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Посмотрите другие вопросы с метками или задайте свой вопрос.