如何使用动态 URL，当 URL 与我声明的任何路由都不匹配时，该 URL 不会重定向到错误页面？ - 反应路由器-dom

Question

我正在使用react-router-dom创建一个项目，我希望URL包含一个id。该 id 将用于从数据库中获取有关具有该 id 的项目的信息并将其呈现在页面上。我已经成功实现了根据url中的id加载数据。

我的问题是，react-router-dom 似乎将带有 id 的 url 解释为未知路由，并将其重定向到我的错误页面。

这就是我的路线设置方式：

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <Error />,
    children: [
      { path: "/", element: <Home /> },
      { path: "progress", element: <Progress /> },
      { path: "logworkout", element: <LogWorkout /> },
      {
        path: "programs",
        element: <Programs />,
        children: [
          { index: true, element: <Navigate to="myprograms" replace /> },
          { path: "discover", element: <DiscoverPrograms /> },
          {
            path: "myprograms",
            element: <MyPrograms />,
            children: [
              {
                path: ":programID",
                element: <ProgramView />,
                loader: programViewLoader,
              },
            ],
          },
        ],
      },
      { path: "product", element: <Product /> },
      { path: "contact", element: <Contact /> },
    ],
  },
]);

我基本上希望呈现 /programs/myprograms/:programID 而不是错误页面。我认为我很好地遵循了有关react-router-dom文档的教程，但我不知道我错过了什么。

编辑：仅

<Programs/>

中的

/programs

渲染

Outlet

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

const Programs = () => {
  return (
    <div className="grid overflow-hidden" style={{gridTemplateColumns: "auto 1fr"}}>
      <SideBar />
      <div className="overflow-auto">
        <Outlet />
      </div>
    </div>
  );
};

export default Programs;

Answer 1

仅

<Programs />

中的

"/programs"

渲染

Outlet

这仅允许将立即嵌套路由渲染到父路由组件的

Outlet

中，例如：

• Navigate 

  在

  "/programs"

  索引路线上

• DiscoverPrograms

  于

  "/programs/discover"

• MyPrograms

  于

  "/programs/myprograms"

这些组件中的任何一个都需要再次渲染它们自己的另一个

Outlet

，以用于它们可能渲染的任何嵌套路由。

const MyPrograms = () => {
  ...

  return (
    ...

    <Outlet />

    ...
  );
};

现在

ProgramView

应该可以通过

MyPrograms

上的

Outlet

'

Programs

通过

Outlet

'

"/programs/myprograms/:programID"

渲染。