افزودن روتر Router و لینک در React

هدایت عباسی آموزش جاوا اسکریپت

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

افزودن روتر در React

برای افزودن روتر در React میبایست در مسیر پروژه، CMD را باز کرده یا با استفاده از بخش ترمینال نرم افرارها، دستور زیر را وارد کرد:

npm i -D react-router-dom

ما صفحات مختلف و بخش Layout سایت را داریم که قبلا می توانید در یک دایرکتوری بنام pages قرار دهید. به مثال زیر توجه نمایید:

import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="contact" element={<Contact />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>
);
}
ReactDOM.render(<App />, document.getElementById("root"));

در مثال بالا ابتدا آدرس صفحات را ایمپورت import کرده ایم که قبلا باید آن را در پوشه pages و در بخش src ایجاد کرده باشیم. حال به توضیح بقیه کدها می پردازیم.

BrowserRouter

ما می بایست لینک ها و روترها را در BrowserRouter قرار دهیم.

سپس Routes خود را تعریف می کنیم. یک برنامه می تواند چندین Routes داشته باشد. مثال اصلی ما فقط شامل یک Routes میباشد.

در بخش Layout معمولا هدر و فوتر قرار دارند که در اولین route قرار داده ایم.

در روت دوم که با index مشخص شده است صفحه اصلی سایت قرار داده ایم. در بخش element آدرس صفحه قرار داده شده است. در بخش path نیز آدرس صفحه درج می شود.

در دو روت بعدی آدرس صفحات بلاگ و تماس با ما قرار داده شده است.

در آخرین روت نیز NoPage قرار داده ایم که اگر آدرس صفحه دچار خطا باشد که به آن خطای 404 می گویند نمایش داده می شود.

ایجاد Layout در React

در بخش زیر یک Layout ساده را مشاهده میکنید می توانید بوت استرپ را نصب کنید و آن را به پروژه خود اضافه کنید و از آن استفاده نمایید و یک قالب ریسپانسیو ایجاد کنید.

import { Outlet, Link } from "react-router-dom";
const Layout = () => {
return (
<>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/blogs">Blogs</Link></li>
<li><Link to="/about">About</Link></li>
</ul> </nav> <Outlet />
</>
)
};
export default Layout;

دقت نمایید اگر صفحه ای را به پروژه ایمپورت میکنید حتما باید آن را ایجاد کرده باشید.

ایجاد یک صفحه ساده در React

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

import React from 'react';
function About() {
return (
<div>
About
</div>
);
}
export default About;

امیدواریم این آموزش برای شما عزیزان مفید بوده باشد. سعی کرده ایم از مبتدی و ساده ترین شکل تدریس کنیم تا برای همه عزیزان مفید باشد.

موفق باشید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید