ایجاد مسیرهای تو در تو (Nested Routes) در React Router ورژن 4 و 5

برای ایجاد مسیرهای تو در تو در React Router نسخه ۴ یا ۵، باید به ساختار Route ها توجه کنی. اگه بخوای کامپوننت‌های فرزندت در مسیرهای مختلف رندر بشن، می‌تونی از Route های تو در تو استفاده کنی. این روش بهت اجازه میده که مسیرهایی رو ایجاد کنی که هر کدوم از اون‌ها یه بخشی از UI رو رندر می‌کنن.

بیایید با یه مثال ساده این کار رو انجام بدیم:

import React from "react";
import {
   BrowserRouter as Router,
   Route,
   Switch,
   Link,
   useRouteMatch,
} from "react-router-dom";
function Dashboard() {
    let { path, url } = useRouteMatch();
 return (
      <div>
        <h2>Dashboard</h2>
        <ul>
          <li>
            <Link to={`${url}/settings`}>Settings</Link>
          </li>
          <li>
            <Link to={`${url}/profile`}>Profile</Link>
          </li>
        </ul>
        <Switch>
           <Route exact path={path}>
               <h3>Please select a sub-route.</h3>
           </Route>
           <Route path={`${path}/settings`} component={Settings} />
           <Route path={`${path}/profile`} component={Profile} />
        </Switch>
      </div>
);
}
function Settings() {
   return <h3>Settings</h3>;
}
// Profile component
function Profile() {
    return <h3>Profile</h3>;
}
// App component
function App() {
  return (
     <Router>
        <div>
          <ul>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
          <Switch>
              <Route path="/dashboard" component={Dashboard} />
          </Switch>
        </div>
       </Router>
);
}
export default App;

در این مثال، ما یک مسیر اصلی داریم به اسم /dashboard که یک کامپوننت Dashboard رو رندر می‌کنه. داخل این کامپوننت، دو لینک داریم که به مسیرهای /dashboard/settings و /dashboard/profile اشاره می‌کنن. با کلیک روی هر لینک، کامپوننت‌های Settings یا Profile رندر میشن.

همونطور که می‌بینی، از useRouteMatch برای بدست آوردن مسیر فعلی استفاده کردیم تا بتونیم به سادگی مسیرهای تو در تو رو مدیریت کنیم. استفاده از Switch هم بهت اجازه میده که تنها یک کامپوننت در یک زمان رندر بشه.

با این روش می‌تونی به راحتی مسیرهای تو در تو رو در پروژه‌هات پیاده‌سازی کنی. امیدوارم که این پاسخ به کارت بیاد!