没有与位置"/dash/1"匹配的路由

Question

我有以下问题。我的路线没有注册，我不知道为什么。

dashboard.jsx

此代码生成所有链接。

<div className="flex w-3/4 m-auto flex-col mt-10 xl:w-1/2">
{questions.map(({ id, question }) => {
return (
<Link to={`/dash/${id}`}>
<QuestionHeader question={question} />
</Link>
);
})}
</div>

/dash/1,/dash/2,.... are generated by the map function above.

我有两个文件表示路由

NavRoutes

const NavRoutes = () => {
return (
<Routes>
<Route path="/:id" element={<Question />} />
<Route path="" element={<Dashboard />} />
</Routes>
);
};
export default NavRoutes;

这里是主组件

const Main = () => {
return (
<div>
<NavBar />
<NavRoutes />
<Footer />
</div>
);
};
export default Main;

以及认证和访问主页面的主要路由

const App = () => {
let { user } = useAuthContext();
return (
<div className="w-full bg-slate-700 block fixed h-full">
<Header />
<Router>
<Routes>
<Route
path="/dash"
element={!user ? <Navigate to="/auth" /> : <Main />}
>
</Route>
<Route path="" element={<Login />} />
</Routes>
</Router>
</div>
);
};

当我尝试访问/dash/1时，我得到以下错误

router.ts:11 No routes matched location "/dash/1" 

Answer 1

您是否在您的NavRoutes中尝试了以下操作(在'/:id'前加上'/dash'):

<Route path="/dash/:id" element={<Question />} />

Answer 2

我通过以下操作解决了这个问题

const App = () => {
let { user } = useAuthContext();
return (
<div className="w-full bg-slate-700 block fixed h-full">
<Header />
<Router>
<Routes>
<Route
path="/dash/*"
element={!user ? <Navigate to="/auth" /> : <Main />}
>
</Route>
<Route path="/auth" element={<Login />} />
</Routes>
</Router>
</div>
);
};

嵌套更深的

时需要包含*