مسیریابی (Router) (Router)

در برنامه های تک صفحه ای React فقط یک صفحه اصلی داریم. مسیریابی در React یعنی عوض کردن نما با تغییر آدرس مرورگر. برای این کار معمولا از کتابخانه React Router استفاده می کنیم.

React Router در React چیست؟

React Router یک کتابخانه مسیریابی در React است. مسیریابی یعنی جابه جا شدن بین نماهای مختلف، بدون رفرش کامل صفحه.

با React Router می توانی کارهای مهمی انجام دهی:

• ساخت چند صفحه در یک برنامه تک صفحه ای.
• استفاده از پارامترهای آدرس و query string.
• مدیریت history مرورگر و دکمه های عقب و جلو.
• ساخت مسیرهای تو در تو برای چیدمان های پیچیده.
• پیاده سازی مسیرهای محافظت شده برای احراز هویت.

بدون Router، برنامه React تو عملا یک صفحه ثابت می ماند. هیچ راه مرتب و استاندارد برای جابه جایی بین نماها نخواهی داشت.

نصب React Router در پروژه

اول باید بسته React Router را برای وب نصب کنی. نسخه وب نامش react-router-dom است.

در پوشه پروژه این دستور را در ترمینال بزن:

npm install react-router-dom

مشاهده در ادیتور

نکته: اگر از Vite یا Create React App استفاده می کنی، همین دستور کافی است. بعد از نصب می توانی کامپوننت های Router را ایمپورت کنی.

پیچیدن برنامه با BrowserRouter

کامپوننت BrowserRouter ریشه مسیریابی در React است. این کامپوننت رفتار آدرس های مرورگر را برای React آماده می کند.

باید کل برنامه ات را داخل آن قرار بدهی:

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      {/* Your app content */}
    </BrowserRouter>
  );
}

مشاهده در ادیتور

بدون BrowserRouter بقیه کامپوننت های مسیریابی در React کار نخواهند کرد. آن را معمولا در بالاترین سطح برنامه می گذاریم.

ساخت ویوها برای مسیریابی در React

هر صفحه در مسیریابی در React معمولا یک کامپوننت است. مثلا سه صفحه ساده Home و About و Contact می سازیم.

function Home() {
  return (
    <h1>
      Home Page
    </h1>
  );
}

function About() {
  return (
    <h1>
      About Page
    </h1>
  );
}

function Contact() {
  return (
    <h1>
      Contact Page
    </h1>
  );
}

مشاهده در ادیتور

بعدا این کامپوننت ها را به مسیرهای مختلف وصل می کنیم. هر آدرس، یکی از این ویوها را نمایش می دهد.

مسیریابی پایه با Routes و Route

برای تعریف مسیرها در مسیریابی در React از سه جزء اصلی استفاده می کنیم:

• Link: لینک ناوبری که آدرس مرورگر را عوض می کند.
• Routes: ظرفی که همه Route ها داخل آن هستند.
• Route: نگاشت بین یک مسیر آدرس و یک کامپوننت.

مثال زیر هم لینک ها را می سازد، هم مسیرها را:

import { BrowserRouter } from 'react-router-dom';
import { Routes } from 'react-router-dom';
import { Route } from 'react-router-dom';
import { Link } from 'react-router-dom';

function Home() {
  return (
    <h1>
      Home Page
    </h1>
  );
}

function About() {
  return (
    <h1>
      About Page
    </h1>
  );
}

function Contact() {
  return (
    <h1>
      Contact Page
    </h1>
  );
}

function App() {
  return (
    <BrowserRouter>
      {/* Navigation */}
      <nav>
        <Link to="/">
          Home
        </Link>
        {' '}|
        <Link to="/about">
          About
        </Link>
        {' '}|
        <Link to="/contact">
          Contact
        </Link>
      </nav>

      {/* Routes */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

مشاهده در ادیتور

نکته: BrowserRouter همه چیز را می پیچد، Link آدرس را عوض می کند، و Routes تصمیم می گیرد کدام کامپوننت نمایش داده شود.

مسیرهای تو در تو در مسیریابی در React

مسیر تو در تو یعنی Route داخل Route دیگر باشد. این کار کمک می کند بخشی از صفحه ثابت بماند، فقط بخش داخلی عوض شود.

برای این کار از کامپوننت Outlet استفاده می کنیم. Outlet محل نمایش زیرمسیرها را مشخص می کند.

import { BrowserRouter } from 'react-router-dom';
import { Routes } from 'react-router-dom';
import { Route } from 'react-router-dom';
import { Link } from 'react-router-dom';
import { Outlet } from 'react-router-dom';

function Home() {
  return (
    <h1>
      Home Page
    </h1>
  );
}

function Products() {
  return (
    <div>
      <h1>
        Products Page
      </h1>
      <nav style={{ marginBottom: '20px' }}>
        <Link to="/products/car">
          Cars
        </Link>
        {' '}|
        <Link to="/products/bike">
          Bikes
        </Link>
      </nav>
      <Outlet />
    </div>
  );
}

function CarProducts() {
  return (
    <div>
      <h2>
        Cars
      </h2>
      <ul>
        <li>
          Audi
        </li>
        <li>
          BMW
        </li>
        <li>
          Volvo
        </li>
      </ul>
    </div>
  );
}

function BikeProducts() {
  return (
    <div>
      <h2>
        Bikes
      </h2>
      <ul>
        <li>
          Yamaha
        </li>
        <li>
          Suzuki
        </li>
        <li>
          Honda
        </li>
      </ul>
    </div>
  );
}

function Contact() {
  return (
    <h1>
      Contact Page
    </h1>
  );
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">
          Home
        </Link>
        {' '}|
        <Link to="/products">
          Products
        </Link>
        {' '}|
        <Link to="/contact">
          Contact
        </Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<Products />}>
          <Route path="car" element={<CarProducts />} />
          <Route path="bike" element={<BikeProducts />} />
        </Route>
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

مشاهده در ادیتور

نکته: آدرس های /products/car و /products/bike هر دو عنوان «Products Page» را نشان می دهند. فقط بخش داخلی با Outlet عوض می شود.

استایل دادن به لینک فعال با NavLink

کامپوننت NavLink نسخه هوشمند Link است. NavLink می فهمد لینک فعلی فعال است یا نه.

تابع navLinkStyles بر اساس isActive، رنگ و استایل را تنظیم می کند.

import { BrowserRouter } from 'react-router-dom';
import { Routes } from 'react-router-dom';
import { Route } from 'react-router-dom';
import { NavLink } from 'react-router-dom';

const navLinkStyles = ({ isActive }) => ({
  color: isActive ? '#007bff' : '#333',
  textDecoration: isActive ? 'none' : 'underline',
  fontWeight: isActive ? 'bold' : 'normal',
  padding: '5px 10px'
});

function Home() {
  return (
    <h1>
      Home Page
    </h1>
  );
}

function About() {
  return (
    <h1>
      About Page
    </h1>
  );
}

function Contact() {
  return (
    <h1>
      Contact Page
    </h1>
  );
}

function App() {
  return (
    <BrowserRouter>
      <nav style={{ marginBottom: '20px' }}>
        <NavLink to="/" style={navLinkStyles}>
          Home
        </NavLink>
        {' '}|
        <NavLink to="/about" style={navLinkStyles}>
          About
        </NavLink>
        {' '}|
        <NavLink to="/contact" style={navLinkStyles}>
          Contact
        </NavLink>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

مشاهده در ادیتور

با این روش منوهای بالای سایت به راحتی لینک فعال را بولد و پررنگ نشان می دهند.

پارامترهای آدرس در مسیریابی در React

پارامتر آدرس یا URL Parameter مثل یک متغیر در آدرس است. مثلا در مسیر /customer/Tobias، بخش Tobias یک مقدار پویا است.

در تعریف مسیر از :firstname استفاده می کنیم. در کامپوننت هم با هوک useParams مقدار را می خوانیم.

import { BrowserRouter } from 'react-router-dom';
import { Routes } from 'react-router-dom';
import { Route } from 'react-router-dom';
import { Link } from 'react-router-dom';
import { useParams } from 'react-router-dom';

function Info() {
  const { firstname } = useParams();
  return (
    <h1>
      Hello, {firstname}!
    </h1>
  );
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/customer/Emil">
          Emil
        </Link>
        {' '}|
        <Link to="/customer/Tobias">
          Tobias
        </Link>
        {' '}|
        <Link to="/customer/Linus">
          Linus
        </Link>
      </nav>

      <Routes>
        <Route path="/customer/:firstname" element={<Info />} />
      </Routes>
    </BrowserRouter>
  );
}

مشاهده در ادیتور

حالا اگر به /customer/Emil بروی، متن «Hello, Emil» نمایش داده می شود. همین الگو برای هر نام دیگری هم کار می کند.

گام به گام تمرین مسیریابی در React

برای تمرین، این مراحل ساده را انجام بده:

1. پروژه React بساز و react-router-dom را نصب کن.
2. برنامه را با BrowserRouter بپیچ و سه ویو ساده بساز.
3. با Routes و Route مسیرهای اصلی را تعریف کن.
4. یک صفحه محصولات بساز و با Outlet مسیر تو در تو پیاده کن.
5. لینک ها را با NavLink بساز و استایل فعال را تنظیم کن.
6. یک مسیر با پارامتر آدرس بساز و مقدار را با useParams نشان بده.

اگر خواستی استایل ها را بهتر مدیریت کنی، بخش CSS-in-JS در React را هم ببین. برای خود همین صفحه مسیریابی در React هم بعدا می توانی مثال های پیشرفته تر اضافه کنی.

جمع بندی سریع مسیریابی در React

• React Router کتابخانه استاندارد مسیریابی در React است.
• BrowserRouter ریشه مسیریابی در React و بقیه مسیرهاست.
• Routes و Route نگاشت آدرس به کامپوننت را تعریف می کنند.
• NavLink لینک فعال را تشخیص می دهد و استایل مخصوص می دهد.
• با useParams می توانی پارامترهای پویا را از آدرس بخوانی.