تغییر React Router, nested router از ورژن 5 به 6

سلام همکار عزیز :)

در ورژن 5 React Router برای تعریف Route های تو در تو یا nested، داخل یکی از کامپوننت ها موجود، به شکل زیر بوده:

فرض بر این هست که کامپوننت اصلی App هست و یک کامپوننت دیگه داریم به نام User که قرار هست در اون Nested Route داشته باشیم

// This is a React Router v5 app
import {
  BrowserRouter,
  Switch,
  Route,
  Link,
  useRouteMatch,
} from &quotreact-router-dom&quot

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path=&quot/&quot>
          <Home />
        </Route>
        <Route path=&quot/users&quot>
          <Users />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}


function Users() {
  // در ورژن 5 روت های تو در تو توسط فرزند رندر میشد برای همین 
  // مجبورا از سوییچ در تمام روت ها استفاده میشد و
  // از match.url and match.path باید استفاده مشد

  let match = useRouteMatch();

  return (
    <div>
      <nav>
        <Link to={`${match.url}/me`}>My Profile</Link>
      </nav>

      <Switch>
        <Route path={`${match.path}/me`}>
          <OwnUserProfile />
        </Route>
        <Route path={`${match.path}/:id`}>
          <UserProfile />
        </Route>
      </Switch>
    </div>
  );
}

و خداروشکر الان در ورژن 6 خیلی این موضوع بهبود یافته و به شکل زیر شده:

// This is a React Router v6 app
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
} from &quotreact-router-dom&quot

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path=&quot/&quot element={<Home />} />
        <Route path=&quotusers/*&quot element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to=&quotme&quot>My Profile</Link>
      </nav>

      <Routes>
        <Route path=&quot:id&quot element={<UserProfile />} />
        <Route path=&quotme&quot element={<OwnUserProfile />} />
      </Routes>
    </div>
  );
}

امیدوارم که مطلب کمکتون کرده باشه.

موفق باشید