مسیریابی در ReactJS که به عنوانی دیگری از جمله مسیردهی و روتینگ شناخته می شود یکی از مباحث مهم در این کتابخانه محبوب می باشد و هر طراح فرانتی باید آن را به خوبی درک و استفاده کنید.
مسیریابی در ReactJS
زمانی که پروژه ما بیش از یک صفحه دارد باید آدرس صفحات و پیمایش بین آنها را مدیریت کنیم.
انجام مراحل رو شماره گذاری کردم تا راحت تر بتونید مطالب رو ادامه بدید.
1) برای مسیریابی نیاز است چند کتابخانه رو از react در واقع import کنیم، برای این کار در ابتدا با استفاده از دستور زیر کتابخانه مورد نظر رو نصب می کنیم و بعد در فایل App.js موارد مورد نیاز رو import می کنیم.
npm install react-router-dom --save
import {Route, BrowserRouter as Router} from 'react-router-dom';
2) یک پوشه با نام components در پوشه src ایجاد و فایل های Home.js , About.js , Contact.js را در آن ایجاد می کنیم.
کدهای زیر برای هر فایل می نویسیم.
نکته: فراموش نکنید نام توابع رو تغییر بدید.
import React from "react";
function Home(){
return(
<h1>Home Page</h1>
)
}
export default Home;
3) فایل App.js رو باز می کنیم و کدینگ مسیردهی رو به شکل زیر می نویسیم:
import './App.css';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './components/home';
import About from './components/about';
import Contact from './components/contact';
function App() {
return (
<div className="App">
<h3>Working with routing in react</h3>
<hr />
<Router>
<Link to={'/'}>Home</Link> |
<Link to={'/About'}>About</Link> |
<Link to={'/Contact'}>Contact</Link>
<Routes>
<Route path='/' element={<Home />}></Route>
<Route path='/About' element={<About />}></Route>
<Route path='/Contact' element={<Contact />}></Route>
</Routes>
</Router>
</div>
);
}
export default App;
و تمام!
به همین سادگی و تنها با طی همین سه مرحله می توانیم علاوه بر مسیردهی، لینک سازی به کامپوننت ها صفحات پروژه هم انجام بدیم.
سایر آموزش های مرتبط:
