不能得到嵌套航線使用陣營路由器

我無法得到一個嵌套的路線，以匹配匹配：不能得到嵌套航線使用陣營路由器

<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

不能得到嵌套航線使用陣營路由器

回答

相關問題