反应路由器4 - 嵌套交换机无法按预期工作

Question

App.js

<ConnectedRouter history={history}>
    <Switch>
        <Route path="/dashboard" name="Layout" component={Layout} />
        <Route exact path="/login" name="Login" component={Login} />
        <Redirect from="/" to="/dashboard" />
        <Route component={NoMatch}/>
    </Switch>
</ConnectedRouter>

Layout.js

<Switch>
    <Route path="/" name="Dashboard" component={Dashboard} />
    <Route path="/components/a" component={ComponentA} />
    <Route path="/components/b" component={ComponentB} />
</Switch>

• 问题：
  • 问题＃1 导航到'/ dashboard / components / a'或'/ dashboard / components / b'不按预期显示组件a或b
  • 问题＃2 导航到错误的路径始终重定向到'/ dashboard'而不显示NoMatch组件

更新： 将重定向更改为 <Route exact path='/' render={() => <Redirect to='/dashboard' />} /> 可以解决问题＃2 ，但问题＃1 仍然是

Answer 1

当您要导航到Route或/dashboard时，您可能需要更改/dashboard/componenets/a路径以获得/dashboard/componenets/b参数

<Switch>
    <Route exact path="/dashboard" name="Dashboard" component={Dashboard} />
    <Route path="/dashboard/components/a" component={ComponentA} />
    <Route path="/dashboard/components/b" component={ComponentB} />
</Switch>