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

我正在创建一个项目，其中我希望URL保存一个id.该id将用于从数据库中获取有关具有该id的项的信息，并将其呈现在页面上.我已经成功地实现了基于url中的id的数据加载.

我的问题是react 路由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;

编辑:问题不是关于动态路由，而是关于我在<ProgramView/>上使用的加载器函数.显然，我不会在加载器中返回值.

import Cookies from "js-cookie";
import { refreshToken } from "../../../../util/auth";

export const programViewLoader = ({ params }) => {
  refreshToken()
    .then((refresh) => {
      return fetch("http://localhost:5000/program/load-program", {
        method: "POST",
        headers: {
          "Content-type": "application/json",
          Authorization: `Bearer ${Cookies.get("accessToken")}`,
        },
        body: JSON.stringify({
          programID: params.programID,
        }),
      });
    })
    .then((response) => {
      if (!response.ok) {
        return response.json().then((data) => {
          throw { error: data.error, status: response.status };
        });
      }
      return response.json();
    })
    .then((data) => {
      console.log(data.program);
      return data.program;
    })
    .catch((error) => {
      return { error: "An error occurred while loading the program." };
    });
};

然而，console.log()总是打印一些东西，所以我不确定它为什么不返回任何东西