آموزش پیاده سازی Route ها در React - قسمت اول

شاید یکی از جالب ترین و البته کاربردی ترین امکاناتی که میشه توی وب اپلیکیشن ها اجرا کرد همین پیاده سازی Route ها باشه که در React با کمک پکیج react-router-dom قابل اجراست. برای مثال Router های لاراول رو در نظر بگیرید. مثلا تعریف می کنید که اگر کسی لینک و مسیر pages/about-us رو باز کرد در بخش pages کاربر صفحه درباره ما رو ببینه و در حقیقت یک مسیر برای لینک های سایت تعریف کردید.

در حقیقت با استفاده از Route ها اپلیکیشن خودمون رو صفحه بندی می کنیم و هر کامپوننت رو یک صفحه در نظر میگیرم و می تونیم با لینک ها صفحه مورد نظر رو باز کنیم !!!

آموزش پیاده سازی router ها در react
آموزش پیاده سازی router ها در react

خوب شاید براتون سوال پیش بیاد که اینکار تو React و با جاوااسکریپت چطور قابل پیاده سازی هستش و الان باید چطور بتونیم از URL کامپوننت هامون رو تعویض کنیم و ...

نصب پکیج مورد نیاز

برای شروع باید پکیج react-router-dom رو نصب کنیم:

npm install --save react-router-dom

برای پیاده سازی route ها در react شما به دو روش می تونید عمل کنید:

  • BorwserRouter
  • HashRouter

که من توی این قسمت میخوام در مورد BorwserRouter صحبت کنم و در قسمت های بعدی روش دوم و کارهای بیشتری که میشه انجام داد.

آموزش استفاده از BorwserRouter در React

تو این حالت لینک های شما کاملا شبیه به لینک های معمولی وب سایت ها می مونه و همه چیز با (/) از هم جدا میشن. این روش خیلی محبوب تر هستش و اینکه از HTML5 History API استفاده می کنه و دقیق تر می تونه History یا تاریخچه مسیرهایی که بازدید شدن رو داخلش خودش ذخیره و مدیریت کنه.

برای مثال فرض کنید لینکی شبیه به این میخواید داشته باشید و با BrowserRouter قابل پیاده سازی هستش:

http://site.com/products/computer/cpu/intel/core-i3-8400

به راحتی تمام موارد با slash از هم جدا میشن و میتونید پارامتر های URL مثل ID رو از لینک دریافت کنید.

برای پیاده سازی یک نمونه ساده از کد زیر کمک میگیرم:

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';

// Application Pages
const Home = () => <h1>This is Home page</h1>
const About = () => <h1>This is About page</h1>
const Contact = () => <h1>This is  Contact page</h1>

const App = () => ( 
    <>
        <Link to="/">Home</Link><br />
        <Link to="/about">About</Link><br />
        <Link to="/contact">Contact</Link><br />
        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/contact" component={Contact} /> 
        </Switch> 
    </>
)

render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);

تو خط سوم ما اومدیم یکسری موارد رو از پکیج router وارد کد کردیم که در ادامه توضیح میدم. BorwserRouter برای استفاده از امکان route ها با slash هستش که بالا توضیح دادم و کل اپلیکیشن رو باید داخل این کامپوننت wrapper بشه.

از Switch برای سوئیچ کردن بین route ها استفاده می کنیم و اولین route که با path برابر بود رو render می کنه.

از Route هم برای تعریف مسیرها هستش که باید حتما حتما دو تا prop بهش بدیم , یکی path که مسیر URL رو مشخص می کنیم (مثل نمونه کد بالا) و یکی component هستش که مشخص می کنیم حالا که این مسیر باز شد کدوم کامپوننت رو بفرسته که render بشه.

یک مورد Link هستش که برای ساخت لینک هامون ازش استفاده می کنیم و به صورت خودکار یک لینک ایجاد می کنه و مقدار to رو به صورت prop بهش پاس میدیم که مسیر یا path مورد نظر لینک هستش.

نکته: من برای Home که کامپوننت یا صفحه خانه هستش در Route یک مقدار exact اضافه کردم. این برای این هستش چون path ما برای صفحه خانه فقط یک / خالی هستش و از اونجایی که route های بعدی هم اولشون یک / دارن یعنی دقیقا اونیکه slash خالی هستش رو Home و صفحه خانه در نظر بگیره و کاری به route های دیگه نداشته باشه و دقیقا همون exactly هستش.
توجه: اگر مقدار exact رو بردارید خواهید دید که با کلیک روی همه لینک ها فقط Home رو نمایش میده !!!

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

دریافت پارامترهای URL در react-router-dom

شاید لازم باشه بعضی مواقع یکسری پارامتر مثل ID رو از داخل URL دریافت کنید و داخل کامپوننت خودتون ازش استفاده بگیرید. مثلا ID یک خبر یا محصول برای استفاده داخل API call و نمایش خروجی چیزی شبیه به لینک زیر:

http://site.com/news/sport/45987

مثلا می خوایم در کامپوننت مقدار همون 45987 بالا رو دریافت و در کدها ازش استفاده کنیم:

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';

// Application Pages
const Home = () => <h1>This is Home page</h1>
const About = () => <h1>This is About page</h1>
const Contact = () => <h1>This is  Contact page</h1>
const News = (props) => <h1>News: id = {props.match.params.id}</h1>

const App = () => ( 
    <>
        <Link to="/">Home</Link><br />
        <Link to="/about">About</Link><br />
        <Link to="/contact">Contact</Link><br />
        <Link to="/news/45987">News id 45987</Link><br />
        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/contact" component={Contact} /> 
            <Route path="/news/:id" component={News} />
        </Switch> 
    </>
)

render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);

اینجا اول به Route یک پارامتر رو (:) یا همون دو نقطه اضافه کردیم و اسمش دلبخواهی هستش و من id گذاشتم. بعد داخل کامپوننت News اومدیم از props مقدار مشخص رو از match.params گرفتیم.

توجه: در نظر داشته باشید که مقدار پارامترها محدودیت نداره و برای لینک های متفاوت می تونید هر چقدر که پارامتر بود اضافه کنید و مقادیرش رو بگیرید.

نتیجه گیری

تا به اینجای کار آموزش پیاده سازی Route هار در React با کمک BorwserRouter یاد گرفتیم که همین مدل ابتدایی نیاز خیلی از اپلیکیشن هارو برطرف می کنه. یاد گرفتیم که چطور از URL به کامپوننت ها و صفحات پارامتر ارسال کنیم و ازشون داخل کامپوننت استفاده بگیریم.

تا آموزش بعدی و قسمت های جدیدتر این موضوع خدانگهدار

موفق باشید