از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
تغییر مسیرها در React Router اگر توسعه دهنده ای هستید که کار می کنید روی هر برنامه وب مدرن، احتمالاً از اهمیت راه اندازی صحیح مسیریابی آگاه هستید. هنگامی که بسیاری از آموزش‌های React Router را مرور می‌کنید، ممکن است متوجه شوید که به ندرت به تغییر مسیرها اشاره می‌کنند و در عوض تمرکز می‌کنند. روی روش استفاده از کامپوننت لینک به…
سرفصلهای مطلب
معرفی
اگر توسعه دهنده ای هستید که کار می کنید روی هر برنامه وب مدرن، احتمالاً از اهمیت راه اندازی صحیح مسیریابی آگاه هستید. هنگامی که بسیاری از آموزش‌های React Router را مرور می‌کنید، ممکن است متوجه شوید که به ندرت به تغییر مسیرها اشاره می‌کنند و در عوض تمرکز می‌کنند. روی روش استفاده از Link جزء. برای مدیریت مسیریابی در React، می‌توانیم از آن استفاده کنیم react-router-dom بسته بندی
در این پست، روش‌ها و سناریوهای زیادی را که در آنها می‌توانید از ریدایرکت‌ها در React استفاده کنید، بررسی می‌کنیم. ما همچنین به برخی از استراتژی های قبلی و روش عملکرد آنها با جایگزین های جدید برای آنها در React Router v6 که جدیدترین نسخه تا زمان نگارش این مقاله است نگاه خواهیم کرد.
پیش نیازها
در این مقاله از react-router-dom بسته ای که باید در پروژه خود نصب کنیم. این کار با اجرای یکی از دستورات زیر در ما انجام می شود terminal:
$ npm i react-router-dom
یا
$ yarn add react-router-dom
تغییر مسیر و پیمایش کامپوننت
این Redirect جزء معمولا در نسخه های قبلی استفاده می شد react-router-dom بسته ای برای انجام سریع تغییر مسیرها با وارد کردن کامپوننت از آن react-router-dom و سپس استفاده از جزء با ارائه to تکیه گاه، عبور از page شما مایل به تغییر مسیر به.
import { Redirect } from 'react-router-dom';
<Route path='/redirect-page' element={ <Redirect to="/error-page" /> }/>
با انتشار React Router v6، Redirect جزء حذف شد و با Navigate جزء، که درست به عنوان Redirect جزء با در نظر گرفتن to prop تا شما را قادر سازد تا به page شما مشخص می کنید
import { Navigate } from 'react-router-dom';
<Route path="/redirect" element={ <Navigate to="/error-page" /> } />
مطمئن شوید که از قبل مسیر را دارید. به عنوان مثال، اگر می خواهید به “/error- هدایت شوید.pageمسیر، مطمئن شوید که قبلاً مسیر را اعلام کرده اید قبل از تنظیم تغییر مسیر به سفارش توجه داشته باشید یا Route اعلامیه در کد زیر:
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import ErrorPage from './ErrorPage';
import Home from './Home';
function App() {
return (
<BrowserRouter>
<Routes>
<Route
path="/"
element={ <Home /> }
/>
{/* The next line is very important for the Navigate component to work */}
<Route
path="/error-page"
element={ <ErrorPage /> }
/>
<Route
path="/redirect"
element={ <Navigate to="/error-page" /> }
/>
</Routes>
</BrowserRouter>
);
}
export default App;
تغییر مسیرهای مشروط
این چیزی است که احتمالاً باید هنگام ساخت برنامه های وب از آن استفاده کنید. تغییر مسیرهای مشروط به سادگی مبتنی بر مسیریابی هستند روی معیارهای خاص
یک سناریوی متداول ممکن است زمانی باشد که شما در حال ساختن یک پلتفرم تجارت الکترونیک هستید و نمی خواهید کاربران به اجزا/مواد/فرم های خاصی مانند مودال/کامپوننت پرداخت، دسترسی داشته باشند تا زمانی که برخی از محصولات را به آن اضافه کنند. سبد خرید اگر بخواهند به زور راهشان را وارد کنند page، آنها باید به محصولات هدایت شوند page بنابراین آنها می توانند ابتدا موارد را انتخاب کنند.
این به عنوان تغییر مسیرهای مشروط شناخته می شود. برای این کار از useState() hook تا آرایه سبد خرید را خالی کنیم و سپس معیارهایی را در مسیر خود اعمال کنیم.
const (cartItems, setCartItems) = useState(());
<Route
path="/checkout"
element={ cartItems.length < 1 ? <Navigate to="/products" /> : <Checkout /> }
/>;
در این مثال، تا زمانی که این آرایه خالی باشد، ما نمی توانیم به آن دسترسی داشته باشیم /checkout مسیر تا زمانی که حداقل یک مورد در آن وجود داشته باشد cartItems آرایه.
جایگزین کردن URL فعلی
در برخی موارد، ممکن است بخواهید به جای افزودن (به عنوان مثال، فشار دادن) آن به تاریخچه مرورگر خود، URL فعلی را در مرورگر جایگزین کنید، برای انجام این کار ما فقط باید URL را اضافه کنیم. replace تکیه گاه به Navigate جزء.
<Navigate replace to="/error-page" />
بدون این پشتیبانی، مرورگر تاریخچه، از جمله تغییر مسیر را پیگیری می کند.
تغییر مسیرهای برنامه ای با useNavigate()
ممکن است با آن آشنا باشید useHistory() hook از نسخه های قبلی react-router-dom بسته، که برای تغییر مسیر برنامه‌نویسی کاربران استفاده می‌شد. هنگامی که بازدیدکنندگان پر کردن یک فرم را به پایان رساندند، یا اگر می خواهید یک تابع تغییر مسیر را به یک دکمه اضافه کنید، این یک مورد استفاده عالی است.
این useHistory() hook ابتدا وارد می شود و سپس به یک متغیر اختصاص می یابد، که متعاقباً در یک دکمه (به عنوان مثال) برای هدایت مجدد کاربران پس از انجام یک اقدام خاص استفاده می شود. با استفاده از onClick رویداد، سپس می‌توانیم آن را فراخوانی کنیم .push() روشی برای اینکه به React Router بگوییم که می خواهیم دکمه به کجا هدایت شود.
import { useHistory } from 'react-router-dom';
const Home = () => {
const history = useHistory();
return (
{/* ... */}
<button onClick={() => history.push('/products')}>
{/* ... */}
);
};
با انتشار React Router v6، دیگر از آن استفاده نمی کنیم useHistory() hook، اما در عوض useNavigate() hook، که کاملا مشابه است.
این نیز با واردات انجام می شود hook و سپس یک متغیر به useNavigate() hook، همانطور که ما با آن انجام دادیم useHistory(). اکنون می توانیم از متغیری که برگردانده شده است برای هدایت کاربر به صفحات دیگر استفاده کنیم.
import { useNavigate } from 'react-router-dom';
const Home = () => {
const navigate = useNavigate();
return (
{/* ... */}
<button onClick={() => navigate('/products')}>
{/* ... */}
);
};
توجه داشته باشید: بر خلاف useHistory() hook، این نیازی به فراخوانی ندارد push روش. تنها کاری که ما باید انجام دهیم این است که مسیر را به عنوان یک استدلال به آن منتقل کنیم navigate تابع.
نتیجه
در این پست، ما به تعدادی از راه‌های تغییر مسیر با React Router، روش عملکرد آن و روش مدیریت آن در نسخه قدیمی‌تر و آخرین نسخه v6 نگاه کردیم.
منتشر شده در 1403-01-11 01:04:05
