React Router subPaths

[RealMarvn]

Got a question to React Router DOM v6.

function App() { return ( <React.Suspense fallback={Home}> <ThemeProvider theme={theme}> <Routes> <Route index element={<Standard element={<Home/>}/>}/> <Route path='/dashboard' element={<Standard element={<Dashboard/>}/>}/> <Route path="/control/:id" element={<Control/>}> <Route path='welcomer' element={<Welcomer/>}/> <Route path='tempchannel' element={<TempChannel/>}/> <Route path='notifications' element={<Notifications/>}/> </Route> </Routes> </ThemeProvider> </React.Suspense> ); } }``` This is how my tree looks like currently but I want to do it that way:

domain.de/dashboard -> dashboard
domain.de/dashboard/:ID -> ControlPanel
domain.de/dashboard/:ID/welcomer -> ControlPanel element = Welcomer
domain.de/dashboard/:ID/tempchannel -> ControlPanel element = TempChannel

 I dont really understand how react router dom is working in v6 but i saw it does have this stuff like subPaths...How can I do this? I now have the routes I want with Control. But there is a problem...Images won't load correctly...They are not found somehow. And /dashboard is a completly other component than control. I cant just add an Outlet to /dashboard because i dont want to show any of those components on Dashboard.tsx in subRoutes .... I only want to show the Outlet in routes like /welcomer .. 

[Moshyfawn]

You just nest Routes inside each other to construct your layout.

See this codesanbox

[RealMarvn]

And this is the Control Panel....There has to be no Footer or Header.....This is looking completly different. Thats why Outlet is so confusing to me...Because If I use it like you did , the header would stay

[Moshyfawn]

You've gotta play around with nested Routes. I've updated the codesanbox

[RealMarvn]

Ah yeah now I understand!

 return ( <React.Suspense fallback={Home}> <ThemeProvider theme={theme}> <Routes> <Route index element={<Standard element={<Home/>}/>}/> <Route path='/dashboard' element={<Standard element={<Dashboard/>}/>}/> <Route path="/dashboard/:id" element={<ControlPanel/>}> <Route index element={<Notifications/>}/> <Route path='join-manager' element={<JoinManager/>}/> <Route path='temp-channel' element={<TempChannel/>}/> <Route path='notifications' element={<Notifications/>}/> </Route> </Routes> </ThemeProvider> </React.Suspense> ); }``` 

[RealMarvn]

This works! Great! Thanks again for your help :D.....Do you maby have Discord? I got some questions regarding TS itself. Would it be okay if I ask you sometimes?

[RealMarvn]

Ive got another problem!
Images arent loading correctly:

This is not working if I start routing....Hmmmm