Início / coding / Perguntas / 79341752
Accepted
DisLido
Asked: 2025-01-09 15:44:38 +0800 CST

Como usar o React Router Link em uma rota splat?

  • 772

Eu tenho um roteador assim

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} />,
);

A <Link>página inicial funciona bem. Mas quando clico no link 'Para configuração de espaço' várias vezes, o caminho se torna /homepage/workspace/1/setting/setting/setting....

Não quero escrever o caminho absoluto no link, por exemplo. <Link to="/homepage/workspace/${spaceId}/setting" />Existe uma maneira melhor de resolver esse problema?

Eu tentei:

  • Defina sub-rotas createHashRouterpara remover splat, <Link>funciona bem. Mas não é isso que eu quero.
  • Obtenha o caminho atual da rota para que eu possa usar <Link to={`${currentPath}/setting`} />, mas não encontrei uma API para fazer isso em react-router.
reactjs

1 respostas

  1. Best Answer

    Demorou um pouco para pesquisar o CHANGELOG e a documentação do React-Router v7, mas o caminho de migração dos caminhos relativos do RR6 para o RR7 ( v7_relativeSplatPathsinalizador de recurso) é relativamente simples.

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

    • Dividir <Route>em dois

      Dividir qualquer splat multissegmento <Route>em uma rota pai com o caminho e uma rota filho com o splat

      Velho:

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

      Atual:

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

    • Atualizar links relativos

      Atualize todos os <Link>elementos dentro dessa árvore de rotas para incluir o ..segmento relativo extra para continuar vinculando ao mesmo lugar

      Velho:

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

      Atual:

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

    A chave final foi fazer com que o elemento de rota descendente também renderizasse exatamente em "/homepage/workspace/:spaceId". Para isso, torne a "workspace/:spaceId"rota também uma rota de índice.

    Código final:

    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

relate perguntas