不能得到嵌套航线使用阵营路由器

我无法得到一个嵌套的路线，以匹配匹配：不能得到嵌套航线使用阵营路由器

<Router history={browserHistory}> 
    <Route path="/" component={App}> 
    <IndexRoute component={Home} /> 
    <Route path="about" component={About} /> 
    <Route path="work" component={Work}> 
     <Route path=":slug" component={Sample} /> 
    </Route> 
    </Route> 
</Router>

鉴于此路由器，我不能一个路由匹配，如：/work/sample-1的应用不会抛出错误，我也不能在Sample类上记录任何语句。

即使我硬编码我试图匹配的值，它将无法正常工作。如果我取消嵌套路线，并将路径设置为work/:slug，它将按预期工作。

我在做什么错？

来源

2016-08-05 Brandon

所以你找不到样品的路线是？也可以尝试与 –

我得到：'bundle.js：28311警告：[react-router]位置“/ work/sample”与任何路由不匹配'当我尝试匹配硬编码的路径路径时 – Brandon

终于找到这个模式我正在寻找在反应路由器上的"sidebar"示例Github页面

我嵌套的路线：

<Router history={browserHistory}> 
    <Route path="/" component={App}> 
    <Route path="work" component={Work}> 
     <Route path=":slug" component={Sample} /> 
    </Route> 
    </Route> 
</Router>

然后在Work成分的render方法，我简单需要显示路线的孩子，或该部件的剩余部分：

render() { 
    <div> 
     {this.props.children || 
     <div> 
      {/* rest of "Work" component here */} 
     </div>} 
    </div> 
}

现在，当我导航到嵌套路线时，我的导航项目被选中，并显示嵌套内容。

来源

2016-08-07 12:31:00 Brandon

我想你可能会对你的嵌套:slug route内缺少IndexRoute：

<Router history={browserHistory}> 
    <Route path="/" component={App}> 
    <IndexRoute component={Home} /> 
    <Route path="about" component={About} /> 
    <Route path="work" component={Work}> 
    <IndexRoute component={SomeComponent}/> <<------ This guy 
    <Route path=":slug" component={Sample} /> 
    </Route> 
</Route>

至少这是什么反应路由器文档都显示：https://github.com/reactjs/react-router/blob/master/docs/Introduction.md#adding-more-ui

来源

2016-08-05 09:40:19 nover

当添加呈现'

{this.props.children}

'的应用程序只是没有做任何事的IndexRoute组件时，我得到相同的结果。查询字符串中的路径发生了变化，但目标组件的“构造函数”方法中的“console.log”语句从不会被调用。 – Brandon

这个问题：http://stackoverflow.com/questions/36371951/how-to-properly-use-nested-routes-with-react-router?rq=1让我走上正确的道路。我对React非常陌生，而且我在'Work'类中缺少'{this.props.children}'。我需要重新考虑我的组件，因为这不是我想要实现的。嵌套路线现在可以使用或不使用IndexRoute。感谢您花时间帮助！ – Brandon

好吧，很高兴你知道了:)确保将'propTypes'对象添加到组件中，然后在控制台中编写警告时帮助您解决问题：https：//facebook.github.io/react/文档/可重复使用，components.html＃道具验证 – nover

不能得到嵌套航线使用阵营路由器

回答

相关问题