首页 文章

React Router无法呈现Route

提问于
浏览
0

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

我有以下组件 - 登录 - 主页 - Headers - 侧栏 - 内容

登录组件没有 Headers 或补充工具栏 .

这就是我的路由方式

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

  • 1

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

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

    背后的原因: -

    <Switch> //此处使用switch来切换不同的路由 .

    <Route exact path='/' component={home} /> //它显示了应用程序主页面启动的应用程序的基本路径 .

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

    </Switch>

相关问题