Javascript 为什么我的react router v6代码不起作用，导航没有加载组件

我是一个初学者，所以请容忍我，我在这里学习最新的，我坚持配置路线

我只需点击一个按钮，它就会打开一个新页面，如：

navigate("/NotFoundView", { replace: true });

我的路线很简单，比如：

const routes = [
  {
    path: "/",
    element: <Header />,
    children: [
      { path: "NotFoundView", element: <NotFoundView /> },
      { path: "404", element: <NotFoundView /> },
      { path: "*", element: <NotFoundView /> }
    ]
  }
];

const路由=[
{
路径：“/”，
元素：，
儿童：[
{路径：“NotFoundView”，元素：}，
{路径：“404”，元素：}，
{路径：“*”，元素：}
]
}
];

应用程序启动并显示

，

确定，但单击按钮时不显示

NotFoundView

---

任何ide？

您需要在标题内添加插座组件：

return (
    <div>
    <header>
      <NavBar
        navbarState={navbarOpen}
        handleNavbar={handleNavbar}
        toggle={drawerToggleClickHandler}
        visible={visible}
      />
    </header>
    <Articles/>
    <Outlet/> // your are missing this.
    </div>
  );
}

返回(
//你的朋友错过了这个。
);
}

如果要在标头组件外部渲染NotFoundView，则不需要嵌套路由。这应该起作用：

const routes = [
  { path: "/", element: <Header />},
  { path: "NotFoundView", element: <NotFoundView /> },
  { path: "404", element: <NotFoundView /> },
  { path: "*", element: <NotFoundView /> }
];

const路由=[
{路径：“/”，元素：}，
{路径：“NotFoundView”，元素：}，
{路径：“404”，元素：}，
{路径：“*”，元素：}
];

我按照您的建议添加了

，但没有任何改变如何访问我需要学习的代码中的

孩子。当我添加
和您的
路由时，您建议我的代码沙箱工作。
子线路的用途是什么
？出口元素用作子线路的占位符。在这种情况下，NotFoundView将作为标头的子级呈现。