Question

我使用react-router进行服务器端呈现，并且我将区域设置信息存储在locales.json文件中。语言环境信息仅在来自api调用的响应之后设置，该响应包括当前语言，即'GB', 'NO', 'FR', etc.，然后完成服务器响应，并以正确的语言将所有内容触发到客户端。

但是，我使用react-router match方法：

match({ routes, location: req.url }, (error, redirectLocation, renderProps) => { ... }

......我需要routes基于api响应的语言，即

// Route
<Route path={`:storeId/${locales[language].path}`} />

// locale.json
{
  "GB": {
    "path": "contact"
  },
  "NO": {
    "path": "kontakt"
  }
}

这种方法可行吗？这就像我需要在api调用之后定义路由，但是为了进行api调用，我需要定义路由。

Answer 1

是的，我没有专门尝试过你的例子，但绝对可以从api响应中定义路由并将其传递给“匹配”函数。

您可以尝试以下内容：

function handleServerRendering(req, res) {

  axios.get('http://localhost:3001/myCutomeRoutes')
   .then(function(response){

     const myRoutes = {
       routes: response.data,
       location: req.url
     }

     match(myRoutes, function(error, redirectLocation, routeContext) {
      // WRITE YOUR CODE IN HERE...
     })
   })
   .catch(function(err){
     console.log('error', err);
   })
}

如您所见，您首先进行API调用，然后将response.data传递给“myRoutes”常量

内的路径

React-router服务器端匹配翻译的路由？

1 个答案: