DisLido's questions

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.