react-router-dom v6 问题的动态路由答案

【问题标题】：Dynamic routing with react-roter-dom v6 problemreact-router-dom v6 问题的动态路由
【发布时间】：2022-01-09 06:35:12
【问题描述】：

我正在尝试通过另一个组件中的按钮链接一个组件。我试过这种方式。

在 app.js 文件中

<Route path="/portfolio" element={<Portfolio />}>
    <Route path=":id" element={<SingleProject />} />
</Route>

在投资组合组件中，

<Link to={`/portfolio/${dt.id}`} className="text-2xl text-red-100 borde border-coral px-2 block text-center"><i class="fas fa-info-circle" title="Details"></i></Link>

但不幸的是，它不起作用！每次我点击按钮时，它都会显示投资组合组件。不是特定的动态页面。应该加载哪个。我该如何解决这个问题？

【问题讨论】：

当路由像这样包装时，Portfolio 组件被视为布局/包装器组件，并且在嵌套路由匹配时仍会呈现。您是要同时显示Portfolio 和SingleProject 组件还是只显示其中一个？
@DrewReese 我只想渲染一个。在投资组合组件中，我展示了我的一些项目。并添加了一个按钮以获取详细信息。通过单击哪个用户将被重定向到他/她单击的特定项目的详细信息页面。
有答案帮助解决/解决您的问题/问题吗？ someone answers 时可以做什么。干杯。

标签： react-router-dom

【解决方案1】：

当路由像这样包装时，Portfolio 组件被视为布局/包装器组件，并且在嵌套路由匹配时仍会呈现。由于您想在各自的路线上独立渲染它们，因此它们不能嵌套。将SingleProject 移到它自己的路线上。

<Route path="/portfolio" element={<Portfolio />} />
<Route path="/portfolio/:id" element={<SingleProject />} />

如果这些组件碰巧共享一个布局，或者您确实想嵌套路由，则创建一个布局包装器组件，该组件为嵌套路由呈现 Outlet。

import { Outlet } from 'react-router-dom';

const PortfolioLayout = () => {
  return <Outlet />;
};

...

<Route path="/portfolio" element={<PortfolioLayout />}>
  <Route index element={<Portfolio />} />
  <Route path=":id" element={<SingleProject />} />
</Route>

如果您愿意，在 RRDv6 中您还可以使用相对链接（即链接不以 "/" 字符开头），因此如果 Portfolio 正在呈现链接，它可以相对链接到 ":id"。

<Link
  to={`${dt.id}`}
  className="...."
>
  <i class="fas fa-info-circle" title="Details" />
</Link>

【讨论】：