روت های تو در تو در react

در ضمن دوستان از react-router v5 استفاده میکنم .
و اینکه مشکل من بیشتر سر index های اون های هست ، یعنی مثلا چطور روت index ( / ) برای Pages ایجاد کنم .
دقت کنید الان روت ریشه ریشه من یعنی / به کامپوننت layout صفحات اشاره میکنه و داخل این layout دوباره روت های کل صفحات پیاده شده یعنی لاگین و درباره ما و غیره.
از طرفی کنار / یه /panel هم وجود داره که اشاره به layout پنل کاربری میکنه و داخل این layout هم روت های پنل کاربری پیاده شده .

من میخوام این دوتا روت (/ , /panel) به layout های اختصاصی خودشون اشاره کنن یعنی هدر و فوتر هر کدوم از layout ها فرق میکنه .
الان مشکل من سر روت اصلی در هر کدوم از layout ها است.

@Saeeed
سلام.
لینک زیر رو بررسی کنید :
https://stackoverflow.com/questions/41474134/nested-routes-with-react-router-v4-v5

@mohsenbostan
سلام خیلی ممنون خیلی سخت بود چیز زیادی دستگیرم نشد :)
اگر بیشتر راهنمایی کنید ممنون میشم

@Saeeed
اول یک روت رو به صورت زیر تعریف می کنید :

<Route path='/topics' component={Topics} />

بعد Topics رو به صورت زیر تعریف کنید:

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <Link to={`${match.url}/exampleTopicId`}>
      Example topic
    </Link>
    <Route path={`${match.path}/:topicId`} component={Topic}/>
  </div>
) 

@mohsenbostan

ببینید الان من میخوام داخل layout صفحات خودم یک روت برای home داشته باشم و مثلا یک روت برای لاگین.
و این layout هم با روت اصلی باز میشه به این صورت:

/                           for layout pages
      /                     for home
      /login
      /about

/panel                      for layout panel and his routes                 

سلام
در یکی از پروژه های من فایل اصلی routers.js به این صورته

import Login from "../Components/auth/login";
import Checkphone from "../Components/auth/checkphone";
import NotFound from "../Components/Partials/NotFound";
import Dashboard from "../Components/dashboard";

const routers = [
        {
        path: "/",
        component: Login,
        exact: true
    },
    {
        path: "/login",
        component: Login,
        exact: true
    },
    {
        path: "/login/checkphone",
        component: Checkphone,
        exact: true
    },
    {
        path: "/dashboard",
        component: Dashboard,
        exact: false
    },
    {
        component: NotFound,
    },
]
export default routers;

و فایل app اصلی پروژه به این صورت

import React from 'react';
import {Link , Route , Switch} from 'react-router-dom';
import routers from './router/routers';

function App() {
  return (
    <>
      <Switch>
      {routers.map((routers , index) => <Route key={index} {...routers} />)}
      </Switch>
    </>
  );
}

export default App;

و فایل اصلی روتر داشبرد routersDashboard.js به این صورت

import MainDashboard from "../Components/dashboard/main/dashboard";
import MainAddWork from "../Components/dashboard/main/addWork";
import NotFound from "../Components/Partials/NotFound";

const routersDashboard = [
    {
        path: "/dashboard",
        component: MainDashboard,
        exact: true
    },
    {
        path: "/dashboard/addwork",
        component: MainAddWork,
        exact: true
    }
    ,
    {
        component: NotFound,
    },
]
export default routersDashboard;

و فایل index کامپوننت داشبرد هم این شکلیه

import React from 'react';
import {Route , Switch} from 'react-router-dom';
import routersDashboard from '../../router/routersDashboard';

import Sidebar from '../dashboard/sidebar';
import Navbar from '../dashboard/navbar';

export default function Dashboard(){

return (
    <>
        <Sidebar/>
        <Navbar />
            <Switch>
            {routersDashboard.map((routers , index) => <Route key={index} {...routers} />)}
            </Switch>
    </>
);
}

امیدوارم به جواب رسیده باشید ، اگر در روابط بین این چهار فایل سوالی داشتید بپرسید