React Router 无法渲染路由

Question

新反应 & react-router。我正在使用 react-router-4

我有以下组件 - 登录 - 家 - Header - 侧边栏 - 内容

登录组件没有 Header 或边栏。

这就是我的路由方式

App.js

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

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

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 组件有一个 Link，它有 'to' 值“/home/dashboard”。

不幸的是，这不起作用。单击边栏 Link 时，会加载一个空白页面。

据我了解，在 React Router 4 中，您可以在 Router 层次结构中的任何位置渲染 Route。这就是我试图通过在 '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}/> // 它路由到单击 link

时要到达的组件

</Switch>

React Router 无法渲染路由

React Router unable to render Route

javascript

reactjs

react-router

react-router-v4

react-router-dom