react-router - 处理嵌套页面之间的路由

Question

<Switch>
    <Route exact path={`${path}/dashboard`} component={Dashboard} />
    <Route exact path={`${path}/submissions`} component={SubmissionSelect} />
    <Route exact path={`${path}/submissions/:id`} component={SubmissionPage} />
</Switch>

它是如何从应用程序工作的（假设根 url 是localhost:3000）：

• 单击指向Dashboard组件的链接，导致我被路由到localhost:3000/dashboard
• 在Dashboard组件中，我单击另一个链接，将我带到该SubmissionPage组件（例如localhost:3000/submissions/9）
• 但是，当我尝试导航回Dashboard组件（或任何其他组件）时，URL现在变成localhost:3000/submissions/dashboard
• 如上所示，这个词submissions被错误地附加到路径的末尾，现在整个路由都被破坏了。

我试图参考react-router-dom下面提供的嵌套教程，但它的用例略有不同。 https://reactrouter.com/web/example/nesting

我的路由有问题吗？

提前致谢！

标签： react-router

Answer 1

您需要启动/相对于应用程序根目录的路由。试试这个，也改变你的Link component to use new addresses：

<Switch>
  <Route exact path={`/dashboard`} component={Dashboard} />
  <Route exact path={`/submissions`} component={SubmissionSelect} />
  <Route exact path={`/submissions/:id`} component={SubmissionPage} />
</Switch>;