Navigation – React و مسیریابی (Routing) - آموزش برنامه نويسی و طراحی سايت

اگرچه ما تمام component های خود را داخل یک صفحه تولید میکنیم، اما همچنان برای بارگزاری تمام این component ها داخل index.html به navigation نیاز داریم. React Router، عملکرد navigation را در پروژه ما امکان پذیر میکند.

ما قصد داریم سه گزینه منو ایجاد کنیم: Owner Actions ،Home و Account Actions. این برای اینکه نحوه کارکرد navigation در React و چگونگی تنظیم یک عملکرد lazy load برای بارگزاری component از نوع async در پروژه را ببینیم کفایت میکند.

این مقاله، قسمتی از مجموعه آموزشی زیر میباشد:

اگر میخواهید تمام دستورالعملهای پایه و راهنمای کامل برای آموزش سریالی NET Core. را ببینید، این لینک را بررسی کنید: دستورالعملهای کار با NET Core.

اگر میخواهید تمام دستورالعملهای پایه و راهنمای کامل برای آموزش سریالی React را ببینید، این لینک را بررسی کنید: مقدمه معرفی آموزش سریالی React

برای بررسی قسمت قبل، به این لینک مراجعه کنید: آماده سازی پروژه و ایجاد کامپوننت ها.

جهت دانلود سورس بر روی این لینک کلیک کنید: سری آموزشی React – قسمت 2

این پست به قسمتهای زیر تقسیم میشود:

پیکربندی BrowserRouter ،React Routing و Route
منوی Navigation
ایجاد کامپوننت Not-Found
نتیجه گیری

پیکربندی BrowserRouter ،React Routing و Route

برای شروع با React Routing، با اجرای این دستور در پنجره terminal، باید React Router را نصب کنیم:

npm install --save react-router-dom

1	npm install --save react-router-dom

بعد از تکمیل نصب، فایل App.js را برای پشتیبانی از React routing اصلاح میکنیم:

import React, { Component } from 'react';
import './App.css';
import Layout from '../components/Layout/Layout';
import Home from '../components/Home/Home';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Layout>
          <Switch>
            <Route path="/" exact component={Home} />
          </Switch>
        </Layout>
      </BrowserRouter>
    );
  }
}

export default App;

import React, { Component } from 'react';

import './App.css';

import Layout from '../components/Layout/Layout';

import Home from '../components/Home/Home';

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

class App extends Component {

render() {

return (

</Switch>

</Layout>

</BrowserRouter>

);

}

export default App;

برای اینکه مسیریابی کار کند، component مرکزی اپلیکیشن ما، باید داخل BrowserRouter component باشد. اینجا component مرکزی ما، Layout componentاست و ما آن را با کامپوننت wrap ،BroswerRouter کرده ایم. شما میتوانید این کار را به شیوه دیگری در فایل index.js با wrap کردن کامپوننت <App/> داخل تابع ()ReactDOM.render انجام دهید. هریک از این شیوه ها را انتخاب کنید، نتیجه یکسان خواهد بود.

کامپوننت Switch، اولین child که با location مورد نظر تطبیق داشته باشد را render میکند. هنگامی که مسیر منطبق را پیدا کرد، جستجو برای مسیر دیگر را متوقف می کند.

در نهایت، کامپوننت Route، کامپوننتی است که قرار است کاربر را از یک component به component دیگر redirect کند. در حال حاضر، ما فقط کامپوننت Home را داریم و قرار است در مسیر “/” به کار برده شود.

اگر به navigate ،localhost:3000 کنیم، همان نتیجه ای که قبلا دیده بودیم را خواهیم دید، با این تفاوت که اینبار از routing برای ارائه component های خود استفاده کرده ایم.

منوی Navigation

اکنون با تنظیم مسیریابی، بیایید یک منوی Navigation ایجاد کنیم.

داخل پوشه components، یک پوشه جدید ایجاد کنید و نام آن را Navigation بگذارید. داخل آن دو فایل را ایجاد کنید: Navigation.js و Navigation.css:

ما قصد داریم از عنصر Bootstrap navigation برای ایجاد navigation خود استفاده کنیم. قبل از ایجاد component، بیایید کتابخانه دیگری را نصب کنیم که React برای ادغام یک Bootstrap navigation با یک React-Router navigation به آن نیاز دارد:

npm install --save react-router-bootstrap

1	npm install --save react-router-bootstrap

حالا فایل Navigation.js را اصلاح کنیم:

import React from 'react';
import './Navigation.css';
import { Col, Navbar, Nav, NavItem } from 'react-bootstrap';
import { NavLink } from 'react-router-dom';
import { LinkContainer } from 'react-router-bootstrap';

const navigation = (props) => {
    return (
        <Col md={12} >
            <Navbar inverse collapseOnSelect>
                <Navbar.Header>
                    <Navbar.Brand>
                        <NavLink to={'/'} exact >Account-Owner</NavLink>
                    </Navbar.Brand>
                    <Navbar.Toggle />
                </Navbar.Header>
                <Navbar.Collapse>
                    <Nav>
                        <LinkContainer to={'/owner-list'} exact>
                            <NavItem eventKey={1}>
                                Owner Actions
                            </NavItem>
                        </LinkContainer>
                        <LinkContainer to={'/account-list'}>
                            <NavItem eventKey={2}>
                                Account Actions
                            </NavItem>
                        </LinkContainer>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        </Col>
    )
}

export default navigation;

import React from 'react';

import './Navigation.css';

import { Col, Navbar, Nav, NavItem } from 'react-bootstrap';

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

import { LinkContainer } from 'react-router-bootstrap';

const navigation = (props) => {

return (

<Navbar.Header>

<Navbar.Brand>

<NavLink to={'/'} exact >Account-Owner</NavLink>

</Navbar.Brand>

<Navbar.Toggle />

</Navbar.Header>

<Navbar.Collapse>

<Nav>

Owner Actions

</NavItem>

</LinkContainer>

Account Actions

</NavItem>

</LinkContainer>

</Nav>

</Navbar.Collapse>

</Navbar>

</Col>

)

}

export default navigation;

شرح کد منوی Navigation

همانطور که احتمالا از عبارت import متوجه شده باشید، کامپوننتهای Navbar، Nav و NavItem کامپوننتهای Bootstrap هستند که اینجا وجود دارند تا در ایجاد قسمت بصری کامپوننت navigation به ما کمک کنند. اما برای اینکه مسیریابی اینجا کار کند، باید از کامپوننت NavLink استفاده کنیم که یک کامپوننت react-router-dom میباشد. با کامپوننت NavLink می‌توانیم به یک مسیر دقیق navigate کنیم و علاوه بر این، این کامپوننت، به لینکهای فعال در منوی navigation یک سبک طراحی اختصاص میدهد.

حال باید به کامپوننت NavItem توجه کنیم. این یک کامپوننت Bootstrap برای ایجاد یک آیتم واحد در navigation است و همانطور که از قبل می دانیم، برای اینکه مسیریابی کار کند، باید از NavLink استفاده کنیم نه از کامپوننت NavItem. جایگزین کردن NavItem با کامپوننت NavLink درست کار نمیکند زیرا باعث میشود بخش بصری navigation به هم بریزد. بنابراین راه حل، استفاده از کامپوننت LinkContainer از کتابخانه react-router-bootstrap میباشد که ما هم اکنون آن را نصب کرده ایم. این کامپوننت، کامپوننت NavLink را به طور کامل شبیه سازی می کند، بنابراین ما را قادر می سازد بدون هیچ مشکلی از این navigation استفاده کنیم.

در ادامه، ابتدا باید فایل Navigation.css را تغییر دهیم:

div a.active, ul li.active{
    font-weight: bold!important;
    font-style: italic!important;
    color: #fff!important;
}

div a.active, ul li.active{

font-weight: bold!important;

font-style: italic!important;

color: #fff!important;

}

و برای گنجاندن این کامپوننت Navigation در کامپوننت Layout:

import React from 'react';
import { Grid, Row } from 'react-bootstrap';
import Navigation from '../Navigation/Navigation';

const layout = (props) => {
    return (
        <Grid>
            <Row>
                <Navigation/>
            </Row>
            <main>
                {props.children}
            </main>
        </Grid>
    )
}

export default layout;

import React from 'react';

import { Grid, Row } from 'react-bootstrap';

import Navigation from '../Navigation/Navigation';

const layout = (props) => {

return (

<Grid>

<Row>

</Row>

<main>

{props.children}

</main>

</Grid>

)

}

export default layout;

در نتیجه، ما می توانیم منوی navigation خود را ببینیم:

ایجاد کامپوننت Not-Found

ما قصد داریم ویژگی دیگری را برای تکمیل این قسمت از این پست اضافه کنیم. میخواهیم هر زمان که کاربر یک آدرس URL که موجود نیست را تایپ کرد، برنامه او را به کامپوننت (404) not-found هدایت کند.

اول از همه، یک پوشه جدید داخل پوشه components ایجاد کنیم و نام آن را ErrorPages بگذاریم. داخل این پوشه، یک پوشه جدید به نام NotFound بسازیم. در این پوشه، دو فایل جدید به نام NotFound.js و NotFound.css ایجاد کنید:

حالا فایل NotFound.js را به صورت زیر تغییر دهید:

import React from 'react';
import './NotFound.css'

const notFound = (props) => {
    return (
        <p className={'notFound'}>
            "404 SORRY COULDN'T FIND IT!!!"
        </p>
    )
}
 
export default notFound;

import React from 'react';

import './NotFound.css'

const notFound = (props) => {

return (

"404 SORRY COULDN'T FIND IT!!!"

</p>

)

}

export default notFound;

ما اینجا یک کامپوننت functional ایجاد کردیم که مقداری کد JSX داخل بلاک ()return برمیگرداند. JSX یک syntax extension از جاوااسکریپت است. توصیه می شود از آن با React استفاده کنید تا تعیین نمایید که یک UI چطور باید به نظر برسد. اگرچه این JSX ممکن است شما را به یاد یک زبان قالب بیاندازد، اما از قدرت کامل جاوا اسکریپت استفاده می کند.

سپس، باید فایل NotFound.css را اصلاح کنیم::

.notFound{
    font-weight: bold;
    font-size: 50px;
    text-align: center;
    color: #f10b0b;
}

.notFound{

font-weight: bold;

font-size: 50px;

text-align: center;

color: #f10b0b;

}

در آخر، فایل App.js را نیز اصلاح میکنیم:

import NotFound from '../components/ErrorPages/NotFound/NotFound';

1	import NotFound from '../components/ErrorPages/NotFound/NotFound';

<BrowserRouter>
    <Layout>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="*" component={NotFound} />
      </Switch>
    </Layout>
</BrowserRouter>

</Switch>

</Layout>

</BrowserRouter>

حال با این تغییراتی که صورت گرفته است، هرزمان که کاربر یک آدرس URL که در برنامه موجود نمیباشد را تایپ کند، برنامه یک کامپوننت NotFound را render میکند (حتی اگر localhost:3000/404 😀 را تایپ کنیم).

نتیجه گیری

عالی.

ما با موفقیت، قسمت navigation این سری آموزشی را تکمیل کردیم.

با خواندن این مطلب، شما یاد گرفتید:

نحوه تنظیم React-Routing
شیوه ایجاد کامپوننت Navigation
نحوه استفاده از کتابخانه React-Router-Bootstrap برای ادغام Bootstrap و React-Router navigation
شیوه ایجاد یک کامپوننت 404

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

در قسمت بعدی این سری از آموزش، قصد داریم نحوه آماده سازی HTTP repository را با استفاده از Axios و Redux یاد بگیریم.

لغو پاسخ

سلام من تازه شروع کردم با لینوکس کار کردن و پروژه دات نت نوشتم و می خوام اون رو روی…

سلام آقای ابراهیمی عزیز همانطور که از عنوان مقاله مشخصه، این ویژگیها، ویژگیهای جدیدیه که از نسخه ۲۰۱۷ به بعد…

ممنون از توضیحاتتون همانطور که گفتم این یک cms است که بر اساس asp.net core ساخته شده که در خود…

سلام وقتتون بخیرباشه . ممنون از مقاله خوب و جذابتون . میخواستم بپرسم که چطوری اون نقطه های توی ویژیوال…

من فکر می کنم منظور ایشان فریم ورک وبی هست که با آن Elanat CMS ساخته شده. https://github.com/elanatframework/Code_behind یک سری…

پیکربندی BrowserRouter ،React Routing و Route

منوی Navigation

شرح کد منوی Navigation

ایجاد کامپوننت Not-Found

نتیجه گیری

نویسنده

لغو پاسخ