React路由器无法呈现路由

Question

react & react-router的新特性。我正在使用react-router-4

我有以下组件- Login - Home - Header - Sidebar - Content

登录组件没有页眉或边栏。

这就是我的路由方式

App.js

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

然后在我的Home组件中，我有边栏和内容。

Home.js render方法

<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>

SideBar组件有一个'to‘value '/home/dashboard’的链接。

不幸的是，这不起作用。单击SideBar链接时，将加载一个空白页面。

根据我的理解，在react路由器4中，您可以在路由器层次结构中的任何位置呈现路由。这就是我试图通过在'Grid.Column width={13}‘div中呈现路由来实现的目标。

这里我漏掉了什么？

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>