固定路線未呈現，所分配的分量

這裏是路由器設置固定路線未呈現，所分配的分量

<Route path="/" component={App}> 
    <Route path="/pages(/:section)" component={ Pages }> 
    <Route path="/pages/category" component={ Pages.Category }/> 
    <Route path="/pages/editor(/:uid)" component={ Pages.Editor }/> 
    </Route> 
</Route>

的Pages組分包含Menu元器件這就需要激活按鈕取決於section。這裏奇怪的是組件Pages.Category沒有在props.children的Pages中傳遞，所以它根本沒有被渲染。只要我從path="/pages(/:section)"中刪除(/:section)，就會按預期呈現Pages.Category。編輯器路由相同。這是預期的行爲？難道我做錯了什麼？

來源

2016-08-10 Eduard Jacko

你的代碼是混亂的。如果您正在嵌套路由，則不需要再次在嵌套路由路徑中指定「頁面」。除非路徑匹配'pages/section/pages/category'，否則Pages.Category不會被渲染。另外，我不認爲這是一個好主意，以可選路徑 – Deadfish

嵌套在路線下我相信你是錯的。您可以在嵌套路線中的任何位置設置絕對路徑。這工作正常。 –

我沒有說你的代碼不行。我的意思是很難推理 – Deadfish

是的，從我的經驗來看，這是預期的行爲。您的<Route path="/pages(/:section)" component={ Pages }>是一個路線組。您只能定義基準網址。現在你的路由器匹配這個路由並顯示'Pages'組件。它顯示第一場比賽，這是第一場比賽。你的代碼應該是這個樣子有團體合作：

如果路由使用相對路徑，它建立：
<Route path="/" component={App}> 
    <Route path="pages" component={ Pages }> 
    <Route path="category" component={ Pages.Category }/> 
    <Route path="editor(/:uid)" component={ Pages.Editor }/> 
    </Route> 
</Route> 
你不能在一個絕對的上構建一個URL在祖先積累的道路上。通過使用絕對路徑，嵌套路由可以選擇退出此行爲。

現在，您無法直接訪問「頁面」組件中的哪個頁面，但可以從this.props.location.pathname讀取當前的完整路徑。隨着正則表達式的一點點，你可以找到當前顯示的組件：

this.props.location.pathname.match(/([a-z0-9]+)/g)[1] 
// Will give 'category' or 'editor'

我有一個工作爲例對CodePen：http://codepen.io/loico/pen/VjqKvg#/pages/category

來源

2016-08-10 15:17:12

固定路線未呈現，所分配的分量

回答

相關問題