React Router無法渲染Route

Question

反應和反應路由器的新功能。 我正在使用react-router-4

我具有以下組件-登錄-主頁-標頭-側邊欄-內容

登錄組件沒有標題或邊欄。

這就是我的路線

App.js

<Switch>
   <Route exact path='/login' component={Login}/>
   <Route exact path='/home' component={Home}/>
</Switch>

然后在我的Home組件中，有側邊欄和內容。

Home.js渲染方法

<Grid>
    <Grid.Row>
        <Grid.Column width={3}>
            <SideBar/>
        </Grid.Column>
        <Grid.Column width={13}>
          <Route exact path='/home/dashboard' render={() => <div>Home</div>} />
        </Grid.Column>
    </Grid.Row>
</Grid>

側邊欄組件具有一個鏈接，該鏈接的“到”值為“ / home / dashboard”。

不幸的是，這不起作用。 單擊補充工具欄鏈接后，將加載空白頁面。

根據我的理解，在React Router 4中，您可以在Router層次結構中的任何位置渲染Route。 這就是我試圖通過在'Grid.Column width = {13}'div中渲染Route來實現的目標。

我在這里想念什么？

Answer 1

交換機中的第二條路由是問題。 它應該是：

<Switch>
   <Route exact path='/login' component={Login} />
   <Route component={Home} />
</Switch>

Answer 2

原因：

<Switch> //此處使用switch在不同的路由之間進行切換。

<Route exact path='/' component={home} /> //它顯示您的應用程序的基本路由，該地址從您的應用程序主頁開始。

<Route path='/About' component={About}/> //它會路由到您在單擊鏈接時要到達的組件

</Switch>