React Router در ۵‌دقیقه

بعضی مواقع شما فقط ۵ دقیقه وقت اضافه دارید. به جای هدر دادن این ۵ دقیقه در فضای مجازی، بیایید یک معرفی ۵‌دقیقه‌ای از React Router داشته باشیم. در این آموزش قرار است پایه‌های React Router را در قالب ساختن یک فروشگاه بافندگی یاد بگیریم.

اگر شما با react آشنایی ندارید می‌توانید از طریق این آموزش react را یاد بگیرید.

React Router چیست؟

بیش‌تر وب‌سایت‌های مدرن از یک صفحه ساخته شده‌اند، آن‌ها شبیه وب‌سایت‌های چند‌صفحه‌ای هستند چون دارای کامپوننت‌هایی هستند که مانند صفحه‌های جدا از هم رندر می‌شوند. این وبسایت‌ها معمولا به عنوان SPA – Single Page Application شناخته می‌شوند. کاری که در هسته‌ی این کامپوننت انجام می‌شود این است که با توجه به rout مورد‌نظر کامپوننت مورد‌نظر را render می‌کند. مثلا: (کامپوننت home برای روت / و کامپوننت درباره‌ی ما برای روت /about).

برای مثال ما می‌توانیم از react router استفاده کنیم برای این که www.knit-with-scrimba.com/ را به  www.knit-with-scrimba.com/about یا ... وصل کنیم.

به نظر خیلی عالی می‌آید، اما چگونه این کار را انجام دهیم؟

برای استفاده از React Router باید اول آن را نصب کنیم.

npm install react-router-dom

یا می‌توانید از این پلی‌گراند برای کار با React و React router استفاده کنید که کد در آن نوشته شده است.

خب حالا باید BrowserRoute, Route و Switch را از این کتابخانه ایمپورت کنید.

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

در این مثال، من landing page ها را به دو صفحه (کامپوننت) به نام‌های Shop و About متصل می‌کنم.

قبل از هر چیز، شما باید برنامه‌ی خودتان را آماده‌ی استفاده از React router کنید. هر چیزی که نیاز به render شدن دارد باید در BrowserRouter‌ قرار داده شود. پس اول، کامپوننت App رو بین آن قرار دهید. این کامپوننتی است که تمام منطق نشان دادن کامپوننت‌های مختلف در آن پیاده‌سازی شده است.

// index.js
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, 
    document.getElementById('root')
)

در قدم بعدی؛ در کامپوننت App، المنت Switch رو اضافه کنید. با این کار مطمئن می‌شویم که فقط یک کامپوننت در زمان render می‌شود.

function App() {
    return (
        <main>
            <Switch>
                
            </Switch>
        </main>
    )
}

حالا زمان این رسیده که Route های خودمان را اضافه کنیم. این‌ها لینک‌هایی هستند که بین کامپوننت‌ها قرار می‌گیرند و باید بین تگ‌های Switch باشند.

برای این که به <Route> بگوییم که کدام کامپوننت را render کند باید خصوصیت path را برای rout مورد نظر و خصوصیت component را برای کامپوننتی که می‌خواهد render شود قرار دهیم.

<Route path='/' component={Home} />

تمام روت‌های مورد‌استفاده در یک سایت معمولا شامل / هم می‌شوند. برای مثال  www.knit-with-scrimba.com/about  هم شامل / می‌شود. و در این مورد اگر به Route نگوییم که فقط به دنبال / بگرد که ادامه نداشته باشد؛ برای همه‌ی routهای ما کامپپوننت Home را render می‌کند. و برای جلوگیری از این قضیه، باید exact را به Route اضافه کنیم.

function App() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={About} />
                <Route path="/shop" component={Shop} />
            </Switch>
        </main>
    )
}

حالا وقت آن رسیده که کامپوننت‌ها را در App ایمپورت کنیم. بهتر است که همه‌ی کامپوننت‌ها را در یک فولدر جدا به اسم components داشته باشید، که کار مرتب‌تر باشد.

import Home from './components/Home';
import About from './components/About';
import Shop from './components/Shop';

و حالا برای گرفتن ارور ۴۰۴ می‌بایست که مانند خط‌های بالا یک Route تعریف کنیم، فقط این بار بدون path؛ آن را به یک کامپوننت وصل کنیم که در آن نوشته باشد: صفحه مورد نظر پیدا نشد. یادتان نرود که این کامپوننت را ایمپورت کنید.

function App() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={About} />
                <Route path="/shop" component={Shop} />
                <Route component={Error} />
            </Switch>
        </main>
    )
}

خب تا اینجا؛ سایت ما فقط با نوشتن URL، قابلیت تغییر صفحه را دارد. برای اضافه کردن لینک‌های قابل کلیک باید از Link استفاده کنیم که react router خودش این کامپوننت را به ما می‌دهد.

یک کامپوننت به اسم Navbar درست کنید و دوباره یادتان نرود که این کامپوننت را در App ایمپورت کنید.

حالا برای هر rout که دارید یک <Link> درست کنید و برای تعیین مسیر هر لینک، خصوصیت to برای آن مشخص کنید.

function Navbar() {
  return (
    <div>
      <Link to="/">Home </Link>
      <Link to="/about">About Us </Link>
      <Link to="/shop">Shop Now </Link>
    </div>
  );
};

سایت شما هم‌اکنون لینک‌های قابل کلیکی دارد که شما را بین صفحات مختلف جا‌به‌جا می‌کند.

سخن پایانی

خب تمام شد. اگر شما می‌خواهید در سایت‌تان حرکت بین صفحات داشته باشید، تگ‌های a را فراموش کنید و react router را نصب کنید؛ این کار شما را در ساختن و از بین بردن صفحات بسیار راحت‌تر می‌کند.

منبع