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

URL های خود را با کتابخانه React Router سازماندهی کنید.

یک برنامه یک صفحه (SPA) یک وب سایت یا برنامه وب است که به صورت پویا یک صفحه وب موجود را با اطلاعات جدید از وب سرور بازنویسی می کند.

در یک برنامه React، کامپوننت ها محتوای سایت را بازیابی می کنند و آن را به یک فایل HTML در پروژه شما ارائه می کنند.

React Router به شما کمک می کند تا به مؤلفه مورد نظر خود بروید و آن را در فایل HTML رندر کنید. برای استفاده از آن، باید بدانید که چگونه React Router را با برنامه React خود راه اندازی و ادغام کنید.

نحوه نصب روتر React

برای نصب React Router در پروژه React خود با استفاده از npm، مدیر بسته جاوا اسکریپت، دستور زیر را در فهرست پروژه خود اجرا کنید:

npm i react-router-dom

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

برای نصب React Router با استفاده از Yarn، این دستور را اجرا کنید:

yarn add react-router-dom@6

راه اندازی React Router

برای پیکربندی React Router و در دسترس قرار دادن آن در برنامه خود، BrowserRouter را از react-router-dom داخل فایل index.js خود وارد کنید، سپس جزء برنامه خود را در عنصر BrowserRouter قرار دهید:

import React from 'react';
import ReactDOM from 'react-dom/client'; 
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot( document.getElementById('root') );

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

قرار دادن جزء برنامه در عنصر BrowserRouter به کل برنامه دسترسی کامل به توانایی های روتر می دهد.

مسیریابی به اجزای دیگر

پس از راه اندازی روتر خود در برنامه خود، باید جلو بروید و اجزای برنامه خود را ایجاد کنید، آنها را مسیریابی کنید و آنها را رندر کنید. کد زیر مؤلفه هایی به نام های «Home»، «About» و «Blog» را وارد و ایجاد می کند. همچنین عناصر Route و Routes را از react-router-dom وارد می کند.

شما مسیرهای خود را در کامپوننت App تعریف خواهید کرد:

import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Blog from './Blog';

function App() {
    return (
      <Routes>
        <Route path='/' element={ <Home /> } />
        <Route path='/about' element={ <About /> } />
        <Route path='/blog' element={ <Blog /> }/>
      </Routes>
    )
}

export default App;

کامپوننت App جزء اصلی است که تمام کدهایی را که نوشته‌اید در سایر اجزای خود ارائه می‌کند.

عنصر Routes عنصر والد است که مسیرهای فردی را که در مؤلفه برنامه خود ایجاد می‌کنید، می‌پیچد. عنصر Route یک مسیر واحد ایجاد می کند. این دو ویژگی prop دارد: یک مسیر و یک عنصر.

ویژگی path مسیر URL کامپوننت مورد نظر را مشخص می کند. اولین مسیر در بلوک کد بالا از یک بک اسلش (/) به عنوان مسیر خود استفاده می کند. این یک مسیر ویژه است که React ابتدا آن را رندر می کند، بنابراین مؤلفه Home هنگام اجرای برنامه خود رندر می شود. این سیستم را با اجرای رندر شرطی در React Components خود اشتباه نگیرید. می توانید هر نامی که دوست دارید به این ویژگی مسیر بدهید.

ویژگی عنصر مؤلفه‌ای را که Route ارائه می‌کند، تعریف می‌کند.

کار با مؤلفه پیوند روتر React

کامپوننت لینک یک جزء React Router است که برای پیمایش مسیرهای مختلف استفاده می شود. این مؤلفه ها به مسیرهای مختلفی که ایجاد کرده اید دسترسی دارند.

مثلا:

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

function Home() {
    return (
      <div>
        <Link to='/about'>About page</Link>
        <Link to='/blog'>Blog page</Link>
        <h1>This is the Home Page<h1/>
      </div>
    )
}

export default Home;

مؤلفه پیوند تقریباً با تگ لنگر HTML یکسان است، فقط از یک ویژگی به نام «to» به جای «href» استفاده می‌کند. مؤلفه پیوند به مسیر با نام مسیر مربوطه به عنوان ویژگی خود هدایت می شود و مؤلفه Route را ارائه می دهد.

مسیریابی تودرتو و نحوه پیاده سازی آن

روتر React از مسیریابی تودرتو پشتیبانی می کند و به شما امکان می دهد چندین مسیر را در یک مسیر واحد قرار دهید. این عمدتا زمانی استفاده می شود که شباهت هایی در مسیرهای URL مسیرها وجود داشته باشد.

هنگامی که مؤلفه هایی را که می خواهید مسیریابی کنید ایجاد کردید، مسیرهای جداگانه ای را برای هر یک از آنها در مؤلفه برنامه ایجاد خواهید کرد.

مثلا:

import { Routes, Route } from 'react-router-dom'; 
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';

function App() {
    return (
      <Routes>
        <Route path='/article' element={ <Articles /> }/>
        <Route path='/article/new' element={ <NewArticle /> }/>
        <Route path='/article/1' element={ <ArticleOne /> }/>
      </Routes>
    )
}

export default App;

بلوک کد بالا اجزای ایجاد شده، Articles، NewArticle و ArticleOne را وارد و مسیریابی می کند. شباهت هایی در مسیرهای URL بین این سه مسیر وجود دارد.

نام مسیر NewArticle Route مانند مسیر Articles Route شروع می‌شود، با اضافه کردن اسلش (/) و کلمه “new”، یعنی (/new). تنها تفاوت بین نام مسیرهای مسیر مقالات و مسیر ArticleOne، اسلش (/1) در انتهای نام مسیر مؤلفه ArticleOne است.

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

اینطوری:

import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';

function App() {
    return (
      <Routes>
        <Route path='/article'>
          <Route index element={ <Articles /> }/>
          <Route path='/article/new' element={ <NewArticle /> }/>
          <Route path='/article/1' element={ <ArticleOne /> }/>
        </Route>
      </Routes>
    )
}

export default App;

شما سه مسیر جداگانه را در یک عنصر مسیر قرار داده اید. توجه داشته باشید که عنصر Route والد فقط دارای ویژگی path است و هیچ ویژگی عنصری که مؤلفه مورد نظر را تعریف می‌کند، ندارد. ویژگی index در اولین عنصر فرزند مسیر مشخص می کند که این مسیر زمانی که به مسیر URL مسیر والد هدایت می شوید، نمایش داده می شود.

برای اینکه کد خود را بهتر و قابل نگهداری تر کنید، باید مسیرهای خود را در یک کامپوننت تعریف کنید و آن را برای استفاده در مؤلفه برنامه وارد کنید.

مثلا:

import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';

function ArticleRoutes() {
    return (
      <Routes>
        <Route index element={ <Articles /> }/>
        <Route path='/article/new' element={ <NewArticle /> }/>
        <Route path='/article/1' element={ <ArticleOne /> }/>
      </Routes>
    )
}

export default ArticleRoutes;

مؤلفه موجود در بلوک کد بالا حاوی مسیرهای تودرتو است که قبلاً در مؤلفه برنامه بودند. پس از ایجاد کامپوننت، باید آن را به کامپوننت برنامه وارد کرده و با استفاده از یک عنصر Route مسیریابی کنید.

مثلا:

import { Routes, Route } from 'react-router-dom';
import ArticleRoutes from './ArticleRoutes';

function App() {
    return (
      <Routes>
        <Route path='/article/*' element={ <ArticleRoutes /> }>
      </Routes>
    )
}

export default App;

در کامپوننت Route نهایی، علامت‌های بک اسلش و ستاره اضافه شده در انتهای نام مسیر مسیر تضمین می‌کند که نام مسیر با هر نام مسیری که با (/article) شروع می‌شود مطابقت دارد.

روتر React چیزهای بیشتری وجود دارد

اکنون باید با اصول ساخت اپلیکیشن های تک صفحه ای در React.js با استفاده از React Router آشنا شوید.

بسیاری از ویژگی‌های موجود در کتابخانه React Router وجود دارد که تجربه توسعه‌دهنده را هنگام ساخت برنامه‌های وب پویاتر می‌کند.

منبع مقاله