主页 / coding / 问题 / 79341752
Accepted
DisLido
Asked: 2025-01-09 15:44:38 +0800 CST

如何在 splat 路由中使用 react router Link？

  • 772

我有一个这样的路由器

import { createRoot } from 'react-dom/client';
// react-router v7
import { createHashRouter, Link, Outlet, RouterProvider } from 'react-router';

const root = document.createElement('div');
root.setAttribute('id', 'app');
document.body.appendChild(root);

const router = createHashRouter([
  {
    path: 'homepage',
    element: (
      <div>
        <Link to="workspace/1">To workspace 1</Link>
        <br />
        <Link to="foo">To foo</Link>
        <main>
          <Outlet />
        </main>
      </div>
    ),
    children: [
      {
        path: 'workspace/:spaceId/*',
        // I want to lazy load this route, so I use <Routes> to define its sub routes
        element: (
          <div>
            <Link to="setting">To space setting</Link>
            <Routes>
              <Route path="setting" />
            </Routes>
          </div>
        ),
      },
      {
        path: 'foo',
        element: <div>foo</div>,
      },
    ],
  },
]);
createRoot(root).render(
  <RouterProvider router={router} />,
);

主页中的工作<Link>正常。但是当我多次点击“到空间设置”链接时，路径变为/homepage/workspace/1/setting/setting/setting...。

我不想在链接中写绝对路径，例如。<Link to="/homepage/workspace/${spaceId}/setting" />有没有更好的方法来解决这个问题？

我尝试过：

  • 定义子路由以createHashRouter删除 splat，<Link>效果很好。但这不是我想要的。
  • 获取路线的当前路径以便我可以使用<Link to={`${currentPath}/setting`} />，但我没有找到用于这样做的 API react-router。
reactjs

1 个回答

  1. Best Answer

    需要花点时间研究一下 React-Router v7 CHANGELOG 和文档，但从 RR6 到 RR7 相对路径（v7_relativeSplatPath功能标志）的迁移路径相对简单。

    https://reactrouter.com/upgrading/v6#v7_relativesplatpath

    • 分成<Route>两部分

      将任意多段 splat 拆分<Route>为带有路径的父路由和带有 splat 的子路由

      老的：

      {
  path: 'workspace/:spaceId/*',
  element: (
    <div>
      <Link to="setting">To space setting</Link>
      <Routes>
        <Route path="setting" />
      </Routes>
    </div>
  ),
},

      当前的：

      {
  path: "workspace/:spaceId",
  children: [
    {
      path: "*",
      element: (
        <div>
          <Link to="setting">To space setting</Link>
          <Routes>
            <Route path="setting" element={<h1>Setting</h1>} />
          </Routes>
        </div>
      ),
    },
  ],
},

    • 更新相对链接

      更新<Link>该路线树中的所有元素，以包含额外的 ..相关段，从而继续链接到同一地点

      老的：

      <Link to="setting">To space setting</Link>

      当前的：

      <Link to="../setting">To space setting</Link>

    最后的关键是让后代路由元素也精确地呈现在 上"/homepage/workspace/:spaceId"。为此，使该"workspace/:spaceId"路由也成为索引路由。

    最终代码：

    const router = createHashRouter([
  {
    path: "homepage",
    element: (
      <div>
        <Link to="workspace/1">To workspace 1</Link>
        <br />
        <Link to="foo">To foo</Link>
        <main>
          <Outlet />
        </main>
      </div>
    ),
    children: [
      {
        path: "workspace/:spaceId",
        children: [
          {
            index: true,
            path: "*",
            element: (
              <div>
                <Link to="../setting">To space setting</Link>
                <Routes>
                  <Route path="setting" element={<h1>Setting</h1>} />
                </Routes>
              </div>
            ),
          },
        ],
      },
      {
        path: "foo",
        element: <div>foo</div>,
      },
    ],
  },
]);
    • 1

相关问题