Сейчас делаю сайт с локализацией на 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);
};
Вообщем нужен какой-то совет как правильно добавить этот функционал так как раньше я такое не делал и не понимаю как правильно это все провернуть.
Буду рад любым советам