React-router-dom

Question

我想弄清楚为什么使用 React-router-dom 的 Link 和 Route 传递参数无法正常工作。我的路线是这样配置的：

App.tsx

  <Routes>
    <Route path="/:id" element={<Home />} />
    <Route path="/search" element={<Search />} />
  </Routes>

Home 使用默认初始 ID 呈现数据，我在 中使用 Link Search 组件发送一个 id 参数以使用这个不同的 id 在 Home 中呈现数据，这样：

Search.tsx

<Link to={`../${idParam}`}>
  <li>
    Some Link
  </li>
</Link>

我期望的是：当 URL 指向 '/' 时，应该呈现默认的 Home 组件。添加参数后，Home 应接收此参数并使用发送的 ID 呈现。

但是，目前 Home 只有在提供 id 作为参数时才会呈现（例如：'/1234'）。当导航到 '/' 时，React 响应 'No routes matched location "/"'

感谢任何帮助澄清我的设置问题的帮助，谢谢！

Answer 1

现在路由默认匹配精确路径。在 v5 之前，我们可以使用问号符号 (?) 声明一个可选参数。但不幸的是，它在 v6 中不再可用。参考 - issues 现在，您可以在父路由下声明子路由，而不是可选参数。在App.tsx

中使用下面的代码

<Routes>
  <Route path="/">
    <Route path=":id" element={<Home />} />
    <Route path="" element={<Home />} />
  </Route>
  <Route path="/search" element={<Search />} />
</Routes>

同时将 Search.tsx 中的代码更改为

<Link to={`/${idParam}`}>
  <li>
    Some Link
  </li>
</Link>

React-router-dom - 当 Route 有参数时，没有匹配位置 '/' 的路由

React-router-dom - No routes matching location '/' when Route has param

javascript

typescript

reactjs

react-router