Как автоматически изменить маршрут / перенаправление в 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.

Но как сделать это правильно и по-реактивному?

0 ответов

Другие вопросы по тегам