Как автоматически изменить маршрут / перенаправление в React-static
Я пытаюсь превратить наш двуязычный статический веб-сайт в статический веб, который должен быть построен с использованием React-static.
Несмотря на то, что я не кодер, я нахожу это довольно простым и понятным. (Я использую "базовый" шаблон).
Но у меня проблемы с локализацией. Вернее с начальной маршрутизацией.
Структура папок (после сборки) выглядит примерно так:
cs/index.html
cs/academy/index.html
en/index.html
en/academy/index.html
index.html //this is the one which should just redirect you to /en or /cs according to detected language of your browser
Хорошо, так что пока, похоже, я так хочу.
В моем static.config.js я настроил это так:
export default {
getSiteData: () => ({
title: 'Something something'
}),
getRoutes: async () => {
return [
{
path: '/',
component: 'src/containers/index',
},
{
path: '/en',
component: 'src/containers/en/index',
},
{
path: '/cs',
component: 'src/containers/cs/index',
}, // etc. etc.
Тогда в App.js:
const App = () => (
<Router>
<AppStyles>
<nav>
<Link exact to={`/${lang}`}>Blahblah</Link>
<Link to={`/${lang}/features`}>Features</Link>
<Link to={`/${lang}/tour`}>Tour</Link>
<Link to={`/${lang}/pricing`}>Pricing</Link>
</nav>
<div className="content">
<Routes />
</div>
</AppStyles>
</Router>
)
Сейчас я использую lang
как только const lang='en'
до тех пор, пока я не придумаю какой-то язык "государственный переключатель". Кажется, работает нормально.
НО...
Даже если само меню довольно простое, я должен решить главную проблему: как перенаправить из корневого каталога / на правильный маршрут (/en или /cs) после того, как правильный язык обнаружен.
Возможно ли это даже с помощью способа, которым реагирующая статика создает контент? Или я должен использовать какой-то метод старой школы...
Некоторое время назад в нашей старой сети я натолкнулся на этот беспорядок, который, вероятно, не прав, но он работает просто отлично.
Старый добрый index.html
:
var language = navigator.languages && navigator.languages[0] || navigator.language || navigator.userLanguage;
if (language.substring(0, 2) == "en") {
window.location = "/en/"} else //etc. etc.
Но как сделать это правильно и по-реактивному?