反應路由器和嵌套路由

我很困惑如何創建以下（非常簡單）路由結構。反應路由器和嵌套路由

我有了對登錄組件的頂級路線的應用程序：

和應用程序本身另一個頂級路線（我們稱之爲主分量）：

現在，Home組件具有一個標題，一個側欄以及用於子視圖的主空間。

登錄組件應顯示在/login路徑;這很簡單。但令我困惑的是，我希望/路徑在主視圖中顯示帶有特定子組件（我們稱之爲「歡迎」）的Home組件。另外，我能想到的大多數其他路徑都應該在Home組件內部呈現子組件。

因此，要重申：

路徑/呈現與歡迎成分的主頁組件裏面

路徑/foo呈現內與富組件首頁組件它

...

路徑/login呈現登錄組件

感覺就像我正在考慮的結構是：

<Route path='/' component={App}> 
    <IndexRoute component={Home}> 
     <IndexRoute component={Welcome}> 
     <Route path='foo' component={Foo}/> 
    </IndexRoute> 
    <Route path='login' component={Login}/> 
    </Route>

但這顯然是錯誤的。什麼是實現這個路由結構的正確方法？

來源

2016-04-24 azangru

聽起來像你應該有你的登錄組件在你的歡迎組件。在歡迎組件內部創建一個呈現函數，以呈現Login或Welcome組件，具體取決於它們是否已登錄。 –

這可能是一個很好的解決方案，試試吧。

<Route component={App}> 
    <Route path="/" component={Home}> 
    <IndexRoute component={Welcome}/> 
    <Route path="/foo" component={Foo}/> 
    </Route> 
    <Route path="/login" component={Login}/> 
</Route>

來源

2016-04-25 00:32:39 QoP

耶！這很好用！感謝您的解決方案。 – azangru

反應路由器和嵌套路由

回答

相關問題