React Router无法呈现Route

时间:2017-07-30 16:30:49

标签: javascript reactjs react-router react-router-v4 react-router-dom

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

我有以下组件 - 登录 - 家    - 标题    - 边栏    - 内容

登录组件没有标题或补充工具栏。

这就是我的路线

App.js

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

然后在我的Home Component中,我有Sidebar和Content。

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>

SideBar组件有一个“to”值'/ home / dashboard'的链接。

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

根据我的理解,在路由器4中,您可以在路由器层次结构中的任何位置呈现路由。这就是我想通过在'Grid.Column width = {13}'div中渲染一个Route来实现的。

我在这里缺少什么?

2 个答案:

答案 0 :(得分:1)

Switch中的第二条路线是问题所在。它应该是:

SaveChanges()

答案 1 :(得分:0)

背后的原因:-

<Switch> //此处用于在不同路由之间进行切换的开关。

<Route exact path='/' component={home} /> //它显示了您应用程序的基本路线,该位置是您应用程序主页开始的位置。

<Route path='/About' component={About}/> //将其路由到您在单击链接时要到达的组件

</Switch>