Я пытаюсь преобразовать наш двуязычный статический веб-сайт в статический веб, который должен быть построен с использованием 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.
Но как сделать это в реактивно-статическом режиме?