React Router V6 不渲染页面

Question

我试图让我的路线在我的导航栏上运行，但没有页面呈现。我的关注如下：

App.tsx:

  <div>
    <Routes>
      <Route path={login} element={<LoginPage />} />
    </Routes>
    <Routes>
      <Route path='/' element={<Dashboard />}/>
    </Routes>
  </div>

Dashboard.tsx:

export default function Dashboard() {

  const mainPanel = React.createRef();


  const getRoutes = (routes: any) => {
    return routes.map((prop: any, key: number) => {
      if (prop.collapse) {
        return getRoutes(prop.views);
      }

      if (prop.layout) {
        console.log(prop.component)
        console.log(key)
        return (
          <Route
            path={prop.layout + prop.path}
            element={prop.component}
            key={key}
          />
        );
      } else {
        return null;
      }
    });
  };


  return (
    <div className="wrapper">
      <Sidebar activeColor={"danger"} protectedRoutes={ProtectedRoutes} LoggedInUser='Test' AccountRoutes={AccountRoute} />
      <div className="main-panel" ref={mainPanel as React.RefObject<HTMLDivElement>}>
        <TopNavbar />
        <Routes>
          {getRoutes(ProtectedRoutes)}
        </Routes>
      </div>
      <Outlet />
    </div>
  );
}

和我的 Routes.ts:

export const ProtectedRoutes : ProtectedRoute[] = [
    {
        path: "dashboard",
        name: "Dashboard",
        icon: "nc-icon nc-paper",
        component: DashboardPage,
        layout: "/",
    },
]

以下是有效的，但由于某种原因，我被重定向到一个空白页面，并且在我的控制台中显示“没有路由匹配位置/仪表板”

即使没有导航栏，如果我直接转到 URL，它仍然不起作用。

Answer 1

在 react-router-dom v6 中，所有路径始终完全匹配。尾随 "*" 通配符用于允许嵌套路由的路径匹配。 <Route path='/' element={<Dashboard />}/> 应该是 <Route path='/*' element={<Dashboard />}/> 如果你想让它匹配和渲染嵌套的路由组件。对于呈现更多嵌套路由的任何嵌套路由也是如此。

示例：

<div>
  <Routes>
    <Route path={login} element={<LoginPage />} />
    <Route path='/*' element={<Dashboard />}/>
  </Routes>
</div>

React Router V6 不渲染页面

React Router V6 Not rendering pages

reactjs

react-router-dom