Question

我使用的是React，Redux和React-Router@v2.0.0。我试图弄清楚如何在传递特定查询参数时挂载顶级组件。这可能吗？

所以我现有的路线看起来像这样：

export default (
  <Route name="root" path="/" component={RootComponent}>
    <Route name="routeOne" path="a/route/:slug(/)" component={RouteOneComponent} />
    <Route name="routeTwo" path="a/route/:slug/:index" component={RouteTwoComponent} />
  </Route>
);

现在，我需要重构routeTwo，以便它不会安装在a/route/slug/1，而只会安装在a/route/slug?i=1。

这可能吗？我似乎无法在文档中找到任何相关内容。似乎只有实际路由可以有一个组件，并且查询作为prop传递...但不幸的是，这不适用于我的用例。 :(任何想法？

Answer 1

是的，您可以将getComponent用于此

<Route path="a/route/:slug" 
    getComponent={(nextState, cb) => {
       if (nextState.location.query[i] === '1') {
           cb(null, RouteTwoComponent);
       } else {
           cb(null, RouteOneComponent);
       }
    }} />

虽然我认为通常可以在基于道具的渲染方法中处理这种分割。

react-router是否可以根据查询参数安装组件？

1 个答案: