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

Question

我正在尝试使用用户量钩子在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>
    </>
  );
}

然后在titledletails.jss.js中具有标题详细信息，我有一个链接转到相关材料。因此，当我单击时，我将转到材料列表：

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

最后，在材料中。当我单击一份材料列表时，我将转到materialldetails.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>
    </>
  );
}

问题是我如何修改doutes.js以获取，例如，该URL： http：// localhost：3000/titles/1/材料/3，而不是http：// localhost：3000/材料当我在http中进行http时：// localhost：3000/titles/1？

谢谢你！

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中，我删除了/的/code>/材料：

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