Question

您好，为了进行本地化，我需要可选的嵌套路由，例如/ en / mypage，/ ru / mypage，/ my page，我已经尝试使用<Route了，但没有成功。

<Route path="/:lang(en|lt|ru)?" >
   <Route path="/surveys" exact component={Dashboard} />
</Route>

上面已经找到了较早版本的解决方案，但现在似乎无法正常工作。我该如何实施呢？我知道可以添加到每个route参数，但这不是更优雅的方法。

Answer 1

您不能在React-Router v4中嵌套您的路由。相反，您应该在component中添加嵌套路由，或使用render prop：

<Route path="/:lang(en|lt|ru)" render={({ match: { url } }) => (
      <>
        <Route path={`${url}/surveys`} component={Dashboard} exact />
      </>
    )} 
/>

在上面的示例中，您的可用路线为

/en/surveys
/lt/surveys
/ru/surveys

带有可选参数的嵌套路由

1 个答案: