React Router: مفاهیم و راهنمای عملی (قسمت 1)

Summarize this content to 400 words in Persian Lang

راهنمای نهایی برای روتر واکنش: مفاهیم و راهنمای عملی

مقدمه

مسیریابی یک ویژگی ضروری در هر برنامه وب مدرن است. این به کاربران اجازه می دهد تا بین بخش ها یا صفحات مختلف به طور یکپارچه حرکت کنند و تجربه ای روان و تعاملی ایجاد کنند. در React، با استفاده از این امر به دست می آید روتر واکنش، یک کتابخانه قدرتمند که برای مدیریت مسیریابی در برنامه های کاربردی یک صفحه (SPA) طراحی شده است.

React Router فرآیند ایجاد مسیرهای پویا و تودرتو، مدیریت پارامترهای URL، پیاده سازی مسیرهای محافظت شده و موارد دیگر را ساده می کند. در این راهنمای جامع، تمام جنبه‌های React Router را بررسی می‌کنیم، مفاهیم آن را گام به گام تجزیه می‌کنیم و آنها را با مثال‌های عملی پیاده‌سازی می‌کنیم.

روتر React چیست؟

React Router یک کتابخانه اعلامی و مبتنی بر مؤلفه برای مدیریت مسیریابی در برنامه های React است. از یک رویکرد مدرن برای نگاشت URL ها به اجزا استفاده می کند و به توسعه دهندگان این امکان را می دهد تا SPA های مقیاس پذیر و پویا را به راحتی بسازند.

ویژگی های کلیدی React Router

مسیریابی اعلامی: مسیرها را به عنوان اجزاء تعریف کنید که درک و نگهداری سیستم مسیریابی را آسان می کند.

مسیریابی پویا: کنترل پارامترهای پویا در URL هایی مانند /user/:id برای ایجاد مسیرهای انعطاف پذیر و قابل استفاده مجدد.

مسیرهای تو در تو: مسیرهای خود را به صورت سلسله مراتبی سازماندهی کنید و روابط والدین و فرزند را فعال کنید.

مسیرهای محافظت شده: مسیرهای خاص را در پشت احراز هویت یا مجوز ایمن کنید.

ناوبری برنامه ای: بین صفحات به صورت برنامه نویسی بر اساس اقدامات کاربر پیمایش کنید.

پشتیبانی از تاریخچه مرورگر: با پیمایش مرورگر، از جمله اقدامات رو به جلو، عقب و تازه کردن همگام سازی کنید.

نصب روتر React

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

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پس از نصب، آماده ادغام React Router در برنامه خود هستید.

مفاهیم اصلی روتر React

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

1. BrowserRouter و اجزای روتر

در سطح بالای برنامه React خود، باید همه چیز را داخل a بپیچید روتر. روتر React انواع مختلفی از روترها را ارائه می دهد، اما رایج ترین آنها است BrowserRouter، که از API تاریخچه مرورگر برای مدیریت پیمایش استفاده می کند.

نکات کلیدی در مورد BrowserRouter

زمینه مورد نیاز برای مسیریابی را فراهم می کند.
به تغییرات URL مرورگر گوش می دهد و اجزای آن را مجدداً ارائه می دهد.
انواع دیگر روترها مانند HashRouter، از هش استفاده کنید (#) در URL برای پیمایش، اما BrowserRouter بیشتر در کاربردهای مدرن استفاده می شود.

نحوه استفاده از BrowserRouter

در اینجا یک مثال اساسی از استفاده است BrowserRouter:

import React from “react”;
import { BrowserRouter } from “react-router-dom”;

function App() {
return (
<BrowserRouter>
<div>
<h1>Welcome to My Apph1>
<p>Routing starts here!p>
div>
BrowserRouter>
);
}

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح:

ما وارد می کنیم BrowserRouter از react-router-dom.
این BrowserRouter کامپوننت کل برنامه را می پیچد تا عملکرد مسیریابی را فعال کند.

توجه داشته باشید: شما فقط می توانید یکی داشته باشید BrowserRouter در ریشه برنامه شما.

2. مسیرها و اجزای مسیر

پس از بسته بندی برنامه خود با BrowserRouter، مسیرهای فردی را با استفاده از Routes و Route اجزاء

مسیرها و اجزای مسیر چیست؟

Routes: محفظه ای برای تمام مسیرهای برنامه شما.

Route: یک مسیر واحد را نشان می دهد و تعریف می کند:

path: مسیر URL برای مطابقت.

element: مؤلفه React برای رندر در صورت مطابقت مسیر.

مثال پایه

import React from “react”;
import { BrowserRouter, Routes, Route } from “react-router-dom”;

function Home() {
return <h1>Home Pageh1>;
}

function About() {
return <h1>About Pageh1>;
}

function App() {
return (
<BrowserRouter>
<Routes>
<Route path=”https://dev.to/” element={<Home />} />
<Route path=”https://dev.to/about” element={<About />} />
Routes>
BrowserRouter>
);
}

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح:

path=”https://dev.to/”: این مسیر با URL ریشه مطابقت دارد (/) و رندر می کند Home جزء

path=”https://dev.to/about”: مسابقات /about و رندر می کند About جزء
هنگامی که URL تغییر می کند (به عنوان مثال، /about) React Router به طور خودکار کامپوننت مربوطه را رندر می کند.

3. اجزای پیوند و NavLink

در یک برنامه React با استفاده از سنتی برچسب‌ها برای پیمایش باعث می‌شوند مرورگر صفحه را دوباره بارگیری کند. روتر React فراهم می کند Link و NavLink مولفه هایی برای پیمایش یکپارچه بدون بازخوانی صفحه.

مؤلفه پیوند

این Link مؤلفه به شما امکان می دهد با به روز رسانی URL بدون بارگیری مجدد صفحه، بین مسیرها حرکت کنید.

import React from “react”;
import { BrowserRouter, Routes, Route, Link } from “react-router-dom”;

function Home() {
return <h1>Home Pageh1>;
}

function About() {
return <h1>About Pageh1>;
}

function Navbar() {
return (
<nav>
<Link to=”https://dev.to/”>HomeLink>
<Link to=”https://dev.to/about”>AboutLink>
nav>
);
}

function App() {
return (
<BrowserRouter>
<Navbar />
<Routes>
<Route path=”https://dev.to/” element={<Home />} />
<Route path=”https://dev.to/about” element={<About />} />
Routes>
BrowserRouter>
);
}

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح:

Link جایگزین سنتی می شود برچسب ها
استفاده کنید to prop برای تعیین مسیر مقصد.

مؤلفه NavLink

این NavLink جزء مشابه است Link، اما به شما امکان می دهد لینک را بر اساس فعال بودن آن استایل دهید.

import React from “react”;
import { NavLink } from “react-router-dom”;

function Navbar() {
return (
<nav>
<NavLink to=”https://dev.to/” activeClassName=”active”>HomeNavLink>
<NavLink to=”https://dev.to/about” activeClassName=”active”>AboutNavLink>
nav>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تفاوت کلیدی:

این NavLink جزء اضافه می کند activeClassName (یا isActive) برای استایل دادن به لینک های فعال.

قرار دادن آن همه با هم

بیایید این مفاهیم را در یک مثال کوچک برنامه کاربردی ترکیب کنیم:

import React from “react”;
import { BrowserRouter, Routes, Route, Link } from “react-router-dom”;

function Home() {
return <h1>Welcome to the Home Page!h1>;
}

function About() {
return <h1>Learn More About Ush1>;
}

function Navbar() {
return (
<nav>
<Link to=”https://dev.to/”>HomeLink>
<Link to=”https://dev.to/about”>AboutLink>
nav>
);
}

function App() {
return (
<BrowserRouter>
<Navbar />
<Routes>
<Route path=”https://dev.to/” element={<Home />} />
<Route path=”https://dev.to/about” element={<About />} />
Routes>
BrowserRouter>
);
}

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

خروجی:

حرکت به / برای دیدن صفحه اصلی
حرکت به /about برای دیدن صفحه درباره
صفحه به صورت پویا و بدون بارگیری مجدد به روز می شود.

مراحل بعدی

در این قسمت به اصول اولیه پرداختیم:

React Router چیست و چگونه کار می کند.
راه اندازی BrowserRouter.
تعریف مسیرها با استفاده از Routes و Route.
افزودن پیمایش با Link و NavLink.

در مقاله بعدی، بررسی می کنیم:

مسیریابی تو در تو
مسیرهای پویا
مدیریت پارامترهای URL

منتظر قسمت بعدی این مطلب باشید راهنمای نهایی برای روتر React سریال!

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

import React from "react";
import { BrowserRouter } from "react-router-dom";

function App() {
    return (
        <BrowserRouter>
            <div>
                <h1>Welcome to My Apph1>
                <p>Routing starts here!p>
            div>
        BrowserRouter>
    );
}

export default App;

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function Home() {
    return <h1>Home Pageh1>;
}

function About() {
    return <h1>About Pageh1>;
}

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="https://dev.to/" element={<Home />} />
                <Route path="https://dev.to/about" element={<About />} />
            Routes>
        BrowserRouter>
    );
}

export default App;

import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Home() {
    return <h1>Home Pageh1>;
}

function About() {
    return <h1>About Pageh1>;
}

function Navbar() {
    return (
        <nav>
            <Link to="https://dev.to/">HomeLink>
            <Link to="https://dev.to/about">AboutLink>
        nav>
    );
}

function App() {
    return (
        <BrowserRouter>
            <Navbar />
            <Routes>
                <Route path="https://dev.to/" element={<Home />} />
                <Route path="https://dev.to/about" element={<About />} />
            Routes>
        BrowserRouter>
    );
}

export default App;

import React from "react";
import { NavLink } from "react-router-dom";

function Navbar() {
    return (
        <nav>
            <NavLink to="https://dev.to/" activeClassName="active">HomeNavLink>
            <NavLink to="https://dev.to/about" activeClassName="active">AboutNavLink>
        nav>
    );
}

import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Home() {
    return <h1>Welcome to the Home Page!h1>;
}

function About() {
    return <h1>Learn More About Ush1>;
}

function Navbar() {
    return (
        <nav>
            <Link to="https://dev.to/">HomeLink>
            <Link to="https://dev.to/about">AboutLink>
        nav>
    );
}

function App() {
    return (
        <BrowserRouter>
            <Navbar />
            <Routes>
                <Route path="https://dev.to/" element={<Home />} />
                <Route path="https://dev.to/about" element={<About />} />
            Routes>
        BrowserRouter>
    );
}

export default App;