嵌套路由在React中不起作用

Question

我在App.js中有两条路线

<Switch>
    <MainRoute exact={true} path="/" component={Main} />
    <Route path="/login" component={Login} />
</Switch>

在主要组件中我有：

<div><Link to="/reviews" /></div>
<div style={{ height: '1000px' }}>
  {/* Routes */}
  <Switch>
    <Route path="/reviews" component={Reviews} />
  </Switch>
</div>

登录和主路由正常工作，并显示链接。但点击链接后，页面变为空白。

PS：我是React的新手。

Answer 1

更改您的路线，

<Switch>
    <Route path="/login" component={Login} />
    <MainRoute path="/" component={Main} />
</Switch>

首先它会匹配路径/login，如果它不匹配，则匹配/。 /将与/和/reviews匹配。你需要，

1. 删除exact=true，以便/也匹配/reviews
2. 更改/和/login的顺序，以便它首先尝试匹配/login然后/