No routes matching location "/dash/1"

Question

I have the following problem. my route is not registered and i dont know why.

Links

dashboard.jsx

this code generates all the links.

    <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.

i have two files that represent the routes.

NavRoutes

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

here is the Main component

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

export default Main;

and the main routes for authentication and accessing the main page

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>
    );
};

when i try to access /dash/1, i get the following error

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

Answer 1

Did you try the following in your NavRoutes (prepending '/dash' to '/:id'):

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

Answer 2

i solved this by doing the following

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>
    );
};

you need to include a * when nesting deeper