React Router complex dynamic nested routes

Viewed 20

I´m trying to create a complex routing that behaves the following:

http://localhost:3000/dashboard/projectxxxxx/schedule http://localhost:3000/dashboard/projectxxxxx/game-servers http://localhost:3000/dashboard/projectyyyyy/schedule http://localhost:3000/dashboard/projectyyyyy/game-servers

So I need to set the dynamic path first and later on, another nested route. So far, what I have is this following code, but I´m stuck when it comes to get first the project. Could someone help me?

I´m using React Router v6

Thanks a lot!

<Routes>
    <Route path="/" element={ <Navigate to="/dashboard" /> }  />
        <Route path="dashboard" element={ <DashboardPage open={ open } /> }>
            <Route index element={ <SchedulePage /> } />
            <Route path="schedule" element={ <SchedulePage /> } />
            <Route path="game-servers" element={ <GameServersPage /> } />
        </Route>
    <Route path="*" element={ <NoContentPage /> }  />
</Routes>
0 Answers
Related