جابجایی بین صفحات و ناوبری در ری اکت - Navigation In React

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

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

npm install react-router-dom

ایجاد روتر: یک جزء روتر در سطح بالای پروژه خود (معمولاً در فایل index.js) ایجاد کنید که برنامه شما را با <Router> جزء:

import React from 'react';

import ReactDOM from 'react-dom';

import { BrowserRouter as Router } from 'react-router-dom';

import App from './App';

ReactDOM.render(

<Router>

<App />

</Router>,

document.getElementById('root')

);

تعریف مسیرها: صفحات خود را با استفاده از اجزای <Route> تعریف کنید. هر مؤلفه <Route> برای مشخص کردن مسیر URL یک path و برای تعیین اینکه کدام مؤلفه برای آن مسیر URL ارائه شود، یک سرپ component می گیرد. .

import React from 'react';

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

import HomePage from './HomePage';

import AboutPage from './AboutPage';

import ContactPage from './ContactPage';

function App() {

return (

<div>

<Route path="/" exact component={HomePage} />

<Route path="/about" component={AboutPage} />

<Route path="/contact" component={ContactPage} />

</div>

);

}

export default App;

در مثال بالا، اجزایی که صفحات را برای مسیرهای URL /، /about و /contact نشان می‌دهند، تعریف شده‌اند.

پیمایش بین صفحات: پیوندهای پیمایش را برای پیمایش صفحه با استفاده از مؤلفه <Link> ایجاد کنید. مؤلفه <Link> امکان پیمایش بین صفحات را بدون بازخوانی مرورگر فراهم می کند.

import React from 'react';

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

function Navigation() {

return (

<nav>

<ul>

<li>

<Link to="/">Home</Link>

</li>

<li>

<Link to="/about">About</Link>

</li>

<li>

<Link to="/contact">Contact</Link>

</li>

</ul>

</nav>

);

}

export default Navigation;

در مثال بالا، پیوندهای پیمایش با استفاده از مؤلفه‌های <Link> برای پیمایش بین صفحات ایجاد می‌شوند. با کلیک بر روی یک پیوند به مسیر URL مشخص شده منتقل می شود.