为什么我不通过交换机进行路由？ React Router v4

我正在使用React Router 4，并没有通过嵌套的Switch组件进行路由。这里是我的路线：为什么我不通过交换机进行路由？ React Router v4

const routes = (
    <div> 
    <Switch> 
     <Route exact path="/" > 
     <Switch> 
      <Route path="/test" component={Test} /> 
      <Route path="/other" component={Other} /> 
      <Route path="/about" component={About} /> 
     </Switch> 
     </Route> 
     <Route path="*" component={NotFound} /> 
    </Switch> 
    </div> 
);

我打根/路线，但如果我尝试路由到其他任何嵌套路线，/other，/test的，我去我的错误页面。我认为这是因为我有exact的Route与根/路线，但我不知道。我该如何解决？

来源

2017-08-17 jhamm

由于文件说，

开关呈现的第一个孩子或该位置相匹配。

在你的情况下，外部交换机2之间选择，精确的路径=“/”和* ...所以它会与NOTFOUND总是匹配除非路径正是“/” 这就是为什么你应从第4行删除确切内容，并在内部开关内移动<Route path="*" component={NotFound} />。

对于你的情况我会写这样的： https://github.com/sstawecki/polakete/blob/master/client/src/index.js https://github.com/sstawecki/polakete/blob/master/client/src/Routes.js

来源

2017-08-17 14:34:54 Polak

第一'之开关总是要路线：

const routes = ( <Switch> <Route exact={true} path="/" component={Index} /> <Route exact={true} path="/test" component={Test} /> <Route exact={true} path="/other" component={Other} /> <Route exact={true} path="/about" component={About} /> <Route path="*" component={NotFound} /> </Switch> );

你可以从我的工作示例检查这些文件第一个“路线”。路由器永远不会路由到'NotFound'' Route'。 – jhamm

你是对的，我已经更新了答案，结构取决于将如何成为你的页面布局，我分享了我的例子，因为我的页眉和页脚处于分离的路径，并且交换机中的所有路由都在另一个路由中组件，包括NotFound路由。现在不需要嵌套开关。 – Polak

我需要多个'Switch'。基本上，如果你有权访问，你将被允许进入第一个'Switch'的第一个'Route'，否则你将进入'Not Found'页面。如果你通过第一个'Switch'完成，那么你将被允许浏览第二个'Switch'。 – jhamm

为什么我不通过交换机进行路由？ React Router v4

回答

相关问题