Question

我正在尝试将我们的双语静态网站转换为应该使用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.

但是如何以正确的方式在“反应静态”中做到这一点？

如何在React-static中自动更改路由/重定向

0 个答案: