از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
پیمایش برنامه‌ای با استفاده از React RouterPages روی وب‌سایت‌های مدرن و به‌ویژه اپلیکیشن‌های تک‌صفحه‌ای (SPA) از روش سنتی بارگیری کامل صفحات جدید پیروی نمی‌کنند هر زمان که چیزی تغییر کند. روی آنها را به جای آن از مسیریابی سمت سرویس گیرنده استفاده می شود – برای مسیریابی به سمت منابع برای بارگیری بخش دیگری از برنامه یا تغییر ساختاری کل نمای برنامه در صورت…
سرفصلهای مطلب
معرفی
صفحات روی وب سایت های مدرن و به خصوص برنامه های تک صفحه ای (SPA) هر زمان که چیزی تغییر کرد، از روش سنتی بارگذاری صفحات جدید به طور کامل پیروی نکنید روی آنها را مسیریابی سمت مشتری به جای آن استفاده می شود – برای مسیریابی به سمت منابع برای بارگیری قسمت دیگری از برنامه یا تغییر ساختاری کل نمای برنامه در صورت نیاز، زمانی که یک عمل (مانند کلیک کردن روی یک دکمه یا پیوند) انجام می شود.
React یک کتابخانه بسیار محبوب برای توسعه front-end است که برای ایجاد رابط های کاربری بسیار پاسخگو استفاده می شود و طبیعتاً خود را دارد. روتر، که مسیریابی سمت مشتری – the react-router-dom.
در این راهنما، روش ایجاد مسیرها در برنامه React، پیمایش برنامه‌ای بین مسیرها و همچنین ارسال و بازیابی اطلاعات بین آنها با استفاده از React Router را بررسی خواهیم کرد.
ایجاد یک React Application
بیایید با ایجاد یک برنامه ساده React از طریق خط فرمان شروع کنیم:
$ npx create-react-app router-sample
پس از ایجاد، اجازه دهید به دایرکتوری پروژه برویم و برنامه را شروع کنیم:
$ cd router-sample
$ npm start
با این کار یک سرور راه اندازی می شود روی localhost:3000 و مرورگر پیش فرض شما برای سرویس دهی به برنامه فعال می شود. قبل از ایجاد هر فایل جدیدی برای سرویس دهی روی این نقطه پایانی، بیایید نصب کنیم react-router-dom، از آنجایی که از قبل بسته بندی نمی شود.
نصب روتر React
طبق معمول، نصب یک بسته با استفاده از npm به سادگی اجرای یک دستور است:
$ npm install react-router-dom
ایجاد مسیرهای جدید با روتر React
را react-router-dom بسته ایجاد مسیرهای جدید را ساده می کند. برای شروع، کل برنامه را با <BrowserRouter> برچسب زدن ما این کار را برای دسترسی به مرورگر انجام می دهیم history هدف – شی. سپس پیوندهای روتر خود و همچنین اجزایی که برای هر مسیر استفاده خواهند شد را تعریف می کنید.
برای نشان دادن این موضوع، اجازه دهید یک فایل جدید به نام ایجاد کنیم About.js در /src پوشه:
const About = () => {
return (
<div>
<h1>About page here!</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, modi!
</p>
</div>
);
};
export default About;
حالا بیایید به روز رسانی کنیم src/index.js page و import About از فایلی که به تازگی ایجاد کرده ایم. در داخل <BrowserRouter> برچسب، مسیرها و اجزای مرتبط با آنها را تعریف می کنیم:
import { render } from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from "./App";
import About from "./About";
render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} />
<Route path="about" element={<About />} />
</Routes>
</BrowserRouter>,
document.getElementById("root")
);
ما وارد کرده ایم <BrowserRouter> در اینجا، و ما کل برنامه خود را در اطراف آن قرار داده ایم. ما هم انتخاب کرده بودیم App.js به عنوان جزئی برای خانه ما page (زیر / نقطه پایانی)، و About.js به عنوان جزء برای /about page.
در نهایت، بیایید تطبیق دهیم App.js فایل، که باز هم نقطه ورود اصلی برنامه خواهد بود و به خانه ما خدمت می کند page:
import { Link } from "react-router-dom";
function App() {
return (
<div className="App">
<h1>Welcome to my react app!</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus,
pariatur?
</p>
<br />
<Link to="/about">About Page</Link>
</div>
);
}
export default App;
در این مرحله، ما دو مسیر ایجاد کرده ایم: مسیر ورود (/) و /about مسیر، و ما باید بتوانیم به راحتی از خانه حرکت کنیم page به در مورد page وقتی از برنامه خود بازدید می کنیم:
قلاب‌های روتر React (روش‌های ناوبری)
قلاب اخیراً به React اضافه شده اند، که توابعی هستند که به شما اجازه می دهندhookدر وضعیت برنامه، بدون نیاز به نوشتن کلاس‌های جدید. روتر React دارای چند قلاب است که به ما امکان می‌دهد به صورت برنامه‌نویسی به وضعیت روتر دسترسی داشته باشیم و بین اجزاء پیمایش کنیم. از جمله قلاب‌های زیر هستند:
useHistory()userNavigate()useLocation()useParams()
برای استفاده از هر یک از این قلاب ها ابتدا باید import آنها را از react-router-dom بسته و سپس متغیری را مشخص کنید که آن را فراخوانی می کند hook; در بخش‌های بعدی با جزئیات بیشتری به این موضوع خواهیم پرداخت.
useHistory()
توجه داشته باشید: را useHistory() hook در آخرین نسخه React Router منسوخ شده است. اگر از React Router V6 استفاده می کنید، باید از آن استفاده کنید useNavigate() hook بجای. بلافاصله پس از آن پوشیده شده است useHistory().
را useHistory() hook دسترسی مستقیم به نمونه‌های سابقه React Router را فراهم می‌کند و ما را قادر می‌سازد تا اقداماتی مانند بازیابی تعداد ورودی‌های پشته سابقه، افزودن، تغییر یا حذف یک ورودی از پشته و غیره را انجام دهیم. روی.
برخی از مفیدترین روش ها در اینجا عبارتند از:
goBack()– در تاریخ به عقب بروید.goForward()– در تاریخ به جلو بروید.push()– یک ورودی جدید به پشته تاریخ اضافه کنید، به عنوان مثال، به یک URL جدید بروید.replace()– شبیه بهpush()به این ترتیب که جایگزین پشته فعلی در تاریخ می شود، اما برخلاف آنpush()، کاربر نمی تواند به تاریخچه برگردد، یعنی با کلیک بر روی دکمه بازگشت مرورگر به حالت قبلی باز نمی گردد.
فقط با این، ما می توانیم از خود حرکت کنیم About page به خانه page به صورت برنامه ای، توسط push()– وارد کردن یک ورودی جدید به تاریخچه، به طور موثر کاربر را به ورودی جدید هدایت می کند:
import React from "react";
import { useHistory } from "react-router-dom";
const About = () => {
let history = useHistory();
const goHome = () => {
history.push("/");
};
return (
<div>
<h1>About page here!</h1
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, modi!
</p>
<button onClick={goHome}>Go to home page</button>
</div>
);
};
export default About;
اینجا، ما فقط import را useHistory() hook و جدید ایجاد کنید goHome() تابعی که اجرا می کند روی یک دکمه کلیک کنید این فقط یک لفاف برای یک است push() زنگ زدن.
ما همچنین می‌توانیم وضعیت را انتقال دهیم یا داده‌های دلخواه را به مسیری که در حال پیمایش هستیم ارسال کنیم. ما می توانیم این کار را با ارسال یک شی به متدهای فشار به جای نام مسیر به عنوان یک رشته، و اضافه کردن وضعیت خود به یک شی مجزا انجام دهیم:
history.push({
pathname: '/blog,
search: '?blogId=12, // Query string
state: { // Location state
author_name: "John Doe",
},
});
پس از پوشاندن useNavigate()، نگاهی به روش دسترسی به این داده ها با استفاده از useLocation() و useParams() قلاب ها
useNavigate()
اگر از جدیدترین نسخه React Router استفاده می کنید، useHistory() hook به نفع منسوخ شده است useNavigate(). رویکرد تقریباً یکسان است. تفاوت اصلی این است که useNavigate() hook روش هایی مانند را نمی پذیرد .push() یا .replace(). تو فقط navigate() به یک ورودی خاص:
import React from "react";
import { useNavigate } from "react-router-dom";
const About = () => {
let navigate = useNavigate();
const goHome = () => {
navigate("/");
};
return (
<div>
<h1>About page here!</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, modi!
</p>
<button onClick={goHome}>Go to home page</button>
</div>
);
};
export default About;
و البته، این روش همچنین به ما امکان می دهد حالت ها را بین مسیرها منتقل کنیم:
navigate("/blog", { state: { author_name: "John Doe" } });
بازیابی اطلاعات بین مسیرها با useLocation() و useParams()
را useLocation() hook دسترسی ما را به مرورگر فراهم می کند location هدف – شی. آن را در نظر بگیرید hook مسئول کسب اطلاعات لازم در مورد مسیر فعلی:
import { useNavigate, useLocation } from "react-router-dom";
/*...*/
let location = useLocation();
console.log(location);
اجرای کد بالا باید تمام اطلاعات مسیر فعلی را برگرداند، همانطور که در زیر نشان داده شده است:
{
"pathname": "/about",
"search": "",
"hash": "",
"state": null,
"key": "default"
}
منطقی است که به آن فکر کنیم useLocation() hook به عنوان یک useState() hook هر زمان که URL تغییر کند وضعیت را به یک مکان جدید به روز می کند. از سوی دیگر، userParams() hook می توان برای بدست آوردن مقدار پارامترهای URL استفاده کرد. هنگام تماس، useParams() یک شی ارائه می دهد که نام پارامترهای URL را به مقادیر آنها در URL فعلی نگاشت می کند.
به عنوان مثال، در پیکربندی روتر خود، بگویید که یک مسیر پویا داشته ایم:
<Route path="/about/:user_id">
<About />
</Route>
و روی یکی دیگر page، ما یک مؤلفه پیوند داریم که به برخی از اطلاعات مربوط به آن اشاره می کند کاربر 2:
<Link to="/about/2">About User 2</Link>
هنگامی که پارامترها ارسال می شوند، همانطور که قبلا دیده ایم – می توانیم از طریق پارامترها به پارامترها دسترسی داشته باشیم userParams() hook:
import { useParams } from "react-router-dom";
const About = () => {
const { user_id } = useParams();
return (
<div>
<h1>About user {user_id}</h1>
<p>
Lorem ipsum dolor...
</p>
</div>
);
};
export default About;
نتیجه
React Router برای مسیریابی سمت مشتری از منابع در این راهنما، نگاهی اجمالی به روش پیمایش برنامه‌ای برنامه‌ای با استفاده از React Router و همچنین روش انتقال حالت‌ها بین مسیرها هنگام انجام این کار انداخته‌ایم.
منتشر شده در 1403-01-13 22:40:10
