Reactjs 如何使用React路由器在嵌套路由中进行重定向

登录后，我的应用程序重定向到/admin/dashboard，当输入仪表板路径时，我希望我的应用程序加载第一个组件并重定向到/admin/dashboard/profiles。在App.js组件中，我有代码

<Router>
    <Layout>
      <Navbar />
      <Switch>
        ...
        <Route exact path="/admin/dashboard" component={Dashboard}/>
        ...
      </Switch>
    </Layout>
  </Router>

    <Layout>
      <Sidebar />
      <Switch>
        <PrivateRoute path={`${match.url}/profiles`} component={Profiles} />
        <PrivateRoute path={`${match.url}/tests`} component={Tests} />
        <PrivateRoute path={`${match.url}/settings`} component={Settings} />
      </Switch>
    </Layout>

...
...

在组件中，我有代码

<Router>
    <Layout>
      <Navbar />
      <Switch>
        ...
        <Route exact path="/admin/dashboard" component={Dashboard}/>
        ...
      </Switch>
    </Layout>
  </Router>

    <Layout>
      <Sidebar />
      <Switch>
        <PrivateRoute path={`${match.url}/profiles`} component={Profiles} />
        <PrivateRoute path={`${match.url}/tests`} component={Tests} />
        <PrivateRoute path={`${match.url}/settings`} component={Settings} />
      </Switch>
    </Layout>

---

仅当第一个组件的路径为path={

${match.url}/

}时，它才会加载组件，但当路径为/admin/dashboard/profiles时，它不会呈现profiles组件。我做错了什么？

您在顶级路由上使用了一个精确的属性

<Route exact path="/admin/dashboard" component={Dashboard}/>

这就是任何嵌套路由都不匹配的原因。从父路由中删除确切的属性，它将适用于您

<Route path="/admin/dashboard" component={Dashboard}/>

同样对于路径，必须使用

match.path

而不是

match.url

<代码>匹配。url应用于

链接

和

重定向

组件