[英]React Router V6 Not rendering pages
I am trying to get my routes working from my nav bar but no pages get rendered.我试图让我的路线从我的导航栏开始工作,但没有呈现任何页面。 My follow is as follows:
我的关注如下:
App.tsx:应用程序.tsx:
<div>
<Routes>
<Route path={login} element={<LoginPage />} />
</Routes>
<Routes>
<Route path='/' element={<Dashboard />}/>
</Routes>
</div>
Dashboard.tsx:仪表板.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>
);
}
and my Routes.ts:和我的 Routes.ts:
export const ProtectedRoutes : ProtectedRoute[] = [
{
path: "dashboard",
name: "Dashboard",
icon: "nc-icon nc-paper",
component: DashboardPage,
layout: "/",
},
]
The follow was working but for some reason I am getting redirected to a blank page and in my console it says "No Routes Matched Location /dashboard"以下是有效的但由于某种原因我被重定向到一个空白页面并且在我的控制台中它显示“没有路由匹配位置/仪表板”
Even without the Nav Bar if I go to the URL directly, it still does not work.即使没有导航栏,如果我 go 直接转到 URL,它仍然不起作用。
In react-router-dom
v6 all paths are always exactly matched.在
react-router-dom
v6 中,所有路径总是完全匹配的。 A trailing "*"
wildcard character is used to allow path matching of nested routes.尾随的
"*"
通配符用于允许嵌套路由的路径匹配。 <Route path='/' element={<Dashboard />}/>
should be <Route path='/*' element={<Dashboard />}/>
if you want it to match and render nested route components. <Route path='/' element={<Dashboard />}/>
应该是<Route path='/*' element={<Dashboard />}/>
如果你想让它匹配和渲染嵌套的路由组件。 Same for any nested routes that render yet more nested routes.对于呈现更多嵌套路由的任何嵌套路由也是如此。
Example:例子:
<div>
<Routes>
<Route path={login} element={<LoginPage />} />
<Route path='/*' element={<Dashboard />}/>
</Routes>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.