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