React Router 无法渲染路由

Posted 2023-02-19

【中文标题】React Router 无法渲染路由

【英文标题】：React Router unable to render Route

【发布时间】：2018-01-06 05:06:45

【问题描述】：

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

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

登录组件没有标题或侧边栏。

这就是我的路由方式

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

很遗憾，这不起作用。单击侧边栏链接时，会加载一个空白页面。

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

我在这里错过了什么？

【参考方案1】：

Switch 中的第二条路由是有问题的。应该是：

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

【讨论】：

现在说得通了！谢谢！

【参考方案2】：

原因：-

<Switch> // 这里使用switch来切换不同的路由。

<Route exact path='/' component=home /> // 它显示了您的应用程序的基本路由，您的应用程序主页开始的位置。

<Route path='/About' component=About/> // 当点击链接时，它会路由到你想要到达的组件

</Switch>