如何根据嵌套路由创建正确的URL？

Question

我正在尝试使用 useRoutes 挂钩在 React 项目中创建一些嵌套路由。但是我正在努力按照我的意愿制作 URL 节目。

示例结构项目是这个：

- public
- src
  - Components
    - Header.js
    - MaterialsDetails.js
    - Materials.js
    - TitleDetails.js
    - Titles.js
- App.js
- index.js
- routes.js

我在 routes.js 中创建了这样的路线：

import { Outlet } from "react-router-dom";
import Titles from "./Components/Titles";
import TitleDetails from "./Components/TitleDetails";
import Materials from "./Components/Materials";
import MaterialDetails from "./Components/MaterialDetails";
import Header from "./Components/Header";

const routes = [
  {
    path: "/",
    element: <Header />,
    children: [
      {
        path: "/titles",
        element: <Outlet />,
        children: [
          {
            index: true,
            element: <Titles />
          },
          { path: ":id", element: <TitleDetails /> }
        ]
      },
      {
        path: "/materials",
        element: <Outlet />,
        children: [
          {
            index: true,
            element: <Materials />
          },
          { path: ":id", element: <MaterialDetails /> }
        ]
      }
    ]
  }
];
export default routes;

然后我有 HeaderLayout.js 将显示在每个页面中：

import React from "react";
import { Outlet } from "react-router-dom";

export default function HeaderLayout() {
  return (
    <>
      <h1>Header Layout</h1>
      <Outlet />
    </>
  );
}

在 titles.js 中，我有一个标题列表，其中每个标题在单击时都有其详细信息：

import React from "react";
import { Link } from "react-router-dom";

export default function Titles() {
  return (
    <>
      <h3>Titles</h3>
      <p>
        <Link to="1">Title example 1</Link>
      </p>
      <p>
        <Link to="2">Title example 2</Link>
      </p>
      <p>
        <Link to="3">Title example 3</Link>
      </p>
    </>
  );
}

然后在 TitleDetails.js 除了标题详细信息之外，我还有一个 link 可以转到相关材料。因此，当我单击时，我将转到材料列表：

import React from "react";
import { useParams } from "react-router-dom";
import { Link } from "react-router-dom";

export default function TitleDetails() {
  const { id } = useParams();
  return (
    <>
      <h1>Details of title {id}</h1>
      Related materials: <Link to="/materials">Materials</Link>
    </>
  );
}

最后在 Materials.js 中，我有了与 Titles.js 相同的概念。材料列表，当我点击一个材料时，我将转到 MaterialDetails.js

import React from "react";
import { Link } from "react-router-dom";
export default function Materials() {
  return (
    <>
      <h3>Materials</h3>
      <p>
        <Link to="1">Material example 1</Link>
      </p>
      <p>
        <Link to="2">Material example 2</Link>
      </p>
      <p>
        <Link to="3">Material example 3</Link>
      </p>
    </>
  );
}

问题是我如何修改 routes.js 以获得，例如 URL: http://localhost:3000/titles/1/materials/3 而不是在 [=] 中进入 http://localhost:3000/materials 29=]?

谢谢！

Answer 1

我找到了问题的解决方案：

我把routes.js改成了：

import { Outlet } from "react-router-dom";
import Titles from "./Components/Titles";
import TitleDetails from "./Components/TitleDetails";
import Materials from "./Components/Materials";
import MaterialDetails from "./Components/MaterialDetails";
import HeaderLayout from "./Components/HeaderLayout";

const routes = [
  {
    path: "/",
    element: <HeaderLayout />,
    children: [
      {
        path: "/titles",
        element: <Outlet />,
        children: [
          {
            index: true,
            element: <Titles />
          },
          { path: ":id", element: <TitleDetails /> },
          { path: ":id/materials", element: <Materials /> },
          { path: ":id/materials/:idMaterial", element: <MaterialDetails /> }
        ]
      }
    ]
  }
];
export default routes;

然后在 TitleDetails.js 我删除了 /materials 的 /:

import React from "react";
import { useParams } from "react-router-dom";
import { Link } from "react-router-dom";

export default function TitleDetails() {
  const { id } = useParams();
  return (
    <>
      <h1>Details of title {id}</h1>
      Related materials: <Link to="materials">Materials</Link>
    </>
  );
}

如何根据嵌套路由创建正确的URL？

How to create a correct URL according to nested routes?

nested-routes

reactjs

react-router-dom