如何使用react路由器v4執行動態組件渲染？

我有一個登錄頁面後面跟着一個儀表板頁面的應用程序。我在index.js已經定義的路線是這樣的：如何使用react路由器v4執行動態組件渲染？

<Router> 
    <div> 
    <Route exact path="/" component={Login}/> 
    <Route path="/dashboard" component={Dashboard} /> 
    </div> 
</Router>

Dashboard.js：

return (
    <div> 
    <Header/> 
    <Footer/> 
    <Switch> 
    <Route path="/dashboard/content1" component={content1} /> 
    <Route path="/dashboard/content2" component={content2} /> 
    </Switch> 
    </div> 
);

的Dashboard組件被渲染其子組件3。 Header,Footer和Content1。我希望儀表板組件在默認情況下呈現Content1（即，當url爲/dashboard時）以及url爲/dashboard/content1時，並且當url爲/dashboard/content2時應呈現content2。 Header & Footer組件應該保留。請建議Dashboard組件的配置實現相同。

來源

2017-08-21 m-ketan

限定'content1'和內部'Dashboard'部件'content2'路由，檢查[**此答案**]（https://stackoverflow.com/questions/42254929/how-to- nest-routes-in-react-router-v4）瞭解更多詳情。 –

@MayankShukla我已更新我的問題，並提供更多詳細信息。你能提出一些細節嗎？ –

在陣營路由器V4您的組件中提供的路線，所以你可以寫你的路線如下

<Router> 
    <div> 
    <Route exact path="/" component={Login}/> 
    <Route path="/dashboard" component={Dashboard} /> 
    </div> 
</Router>

，然後在儀表板組件渲染方法

render() { 
    return (
     <div> 
      {/* other content */} 
      <Switch> 
       <Route exact path="/dashboard" component={content1} /> 
       <Route path="/dashboard/content1" component={content1} /> 
       <Route path="/dashboard/content2" component={content2} /> 
      </Switch> 
     </div> 

    ) 

}

來源

2017-08-21 10:40:27

作爲一個變種您可以在編輯前對其進行回覆（嵌套），如下所示：

<Router> 
    <Header/> 
    <Content1/> 
    <Footer/> 
     <Switch> 
     <Route exact path="/" component={Login}/> 
     <Route exact path="/dashboard" component={Dashboard} /> 
     <Route exact path="/dashboard/content1" component={content1} /> 
     <Route exact path="/dashboard/content2" component={content2} /> 
     </Switch>  
</Router>

來源

2017-08-21 10:48:57

Rea ct-Router的Switch組件呈現匹配的第一個東西，因此，如果您將最後沒有路徑的路由置於其上，則會呈現該路由，如果沒有其他路由匹配，則將其視爲默認路由。像這樣：

return (
    <div> 
     <Header/> 
     <Footer/> 
     <Switch> 
      <Route path="/dashboard/content2" exact component={Content2} /> 
      <Route component={Content1} /> 
     </Switch> 
    </div> 
);

我發現渲染組件而不是路由也可以，儘管我不知道它是否被官方支持。

return (
    <div> 
     <Header/> 
     <Footer/> 
     <Switch> 
      <Route path="/dashboard/content2" exact component={Content2} /> 
      <Content1 /> 
     </Switch> 
    </div> 
);

在這種情況下

來源

2017-08-21 13:30:58 0xRm

''''''組件現在默認呈現（在''/ dashboard'''上），但是按下''/ dashboard/content2''' url會引發404錯誤。 –

如果你刪除'exact'道具？ – 0xRm

如何使用react路由器v4執行動態組件渲染？

回答

相關問題