تنظیم مسیریابی شرطی و پاسخگو با React Router v4

مقدمه
مسیریابی پاسخگو در React شامل ارائه مسیرهای مختلف به کاربران بر اساس پورت نمای دستگاهشان است. معمولاً از درخواست های CSS رسانه برای دستیابی به این هدف استفاده می شود ، اما این بدان معنی است که شما فقط با نشان دادن یا عدم نمایش عناصر مختلف با استفاده از گزاره های CSS محدود هستید. با استفاده از مسیرهای پاسخگو ، اکنون می توانید نمایش کامل و جداگانه برنامه های React خود را بر اساس اندازه صفحه نمایش آنها به کاربران مختلف ارائه دهید.
در این آموزش ، نحوه اجرای مسیریابی و سرویس دهی به مسیرهای پاسخگو را در برنامه های React به شما نشان خواهیم داد. با دنبال کردن این آموزش ، یک برنامه داشبورد کاربر ایجاد خواهید کرد که براساس اندازه صفحه نمایش دستگاه آنها ، مسیرهای مختلفی را برای کاربران ارائه می دهد.
پیش نیازها
برای دنبال کردن این راهنما به صورت مناسب ، به موارد زیر نیاز دارید:
Node.js که روی دستگاه شما نصب شده باشد
npm نصب شده بر روی دستگاه شما
برای تأیید نصب خود ، دستورات زیر را اجرا کنید:
$ node –version

$ npm –version

اگر شماره نسخه آنها را به عنوان نتیجه بدست آورید ، آماده هستید تا پیش بروید.
مرحله 1 – نصب React
این مقاله مبتنی بر React است ، بنابراین باید آن را در دستگاه خود نصب کنید. برای نصب React ، دستور زیر را اجرا کنید:
$ npm install -g create-react-app

پس از اتمام این کار ، React را با موفقیت روی دستگاه خود نصب کرده اید. اکنون می توانیم با اجرای این دستورات برنامه جدید خود را ایجاد کنیم:
$ create-react-app responsive-routing

$ cd responsive-routing

نکته بعدی اینست که ماژول های لازم را برای موفقیت ساخت این نسخه ی نمایشی نصب کنیم. این ماژول ها react-router-dom و react-media هستند. ما این کار را با اجرای دستور زیر نصب می کنیم:
$ npm install react-router-dom react-media

اکنون می توانیم با اجرای دستور برنامه را شروع کنیم:
$ npm start

مرحله 2 – ایجاد مؤلفه پیمایش
نماد Github در مرکز صفحه به عنوان قسمت ناوبری برنامه ما عمل می کند. بیایید ببینیم چگونه این کار را انجام دهیم. در پوشه src / خود یک پوشه جدید با نام Nav و فایل های لازم را به شرح زیر ایجاد کنید:
$ cd src

$ mkdir Nav

$ cd Nav && touch index.js Nav.css

باید آرم Github را اضافه کنید و آن را به عنوان logo.svg ذخیره کنید.
اکنون فایل src / Nav / index.js را به روز کنید تا به این شکل ظاهر شود:
// src/Nav/index.js
import React from ‘react’;
import ‘./Nav.css’;
import logo from ‘./logo.svg’;
const Nav = () => (
<nav>
<img src={logo} alt=”” />
</nav>
);
export default Nav;

مولفه ناوبری دارای ظاهر زیر میباشد:
/** src/Nav/Nav.css **/
nav {
display: flex;
justify-content: center;
height: 50px;
margin-bottom: 10px;
}
nav > img {
display: block;
width: 50px;
height: auto;
}

اکنون ، اجازه دهید مؤلفه Nav را ارائه دهیم. برای انجام این کار ، فایل پیش فرض src / App.js را ویرایش کنید تا به این شکل ظاهر شود:
// src/App.js
import React, { Component } from ‘react’;
import Nav from ‘./Nav’;

= App extends Component {
render() {
return (
<div>
<Nav />
</div>
);
}
}
export default App;

مرحله 3 – ایجاد کارت های کاربری
کارتهای کاربر وظیفه نمایش جزئیات کاربر را دارند. حال ، بیایید ببینیم چگونه می توانیم این کار را ایجاد کنیم. در دایرکتوری src / برنامه خود ، یک پوشه جدید Users ایجاد کرده و فایل های زیر را ایجاد کنید:
$ mkdir Users

$ cd Users && touch UsersCard.js UsersCard.css

فایل UsersCard.js را ویرایش کنید تا به این شکل ظاهر شود:
// src/Users/UsersCard.js
import React from ‘react’;
import {Link} from ‘react-router-dom’;
import ‘./UsersCard.css’
const UsersCard = ({ user, match }) => <Link to={`${match.url}/${user.id}`} className=”column card”>
<img src={user.avatar} alt=””/>
<p className=”users-card__name”>{user.name}</p>
<p className=”users-card__username”>@{user.username}</p>
<div className=”users-card__divider”></div>
<div className=”users-card__stats”>
<div>
<p>{user.followers}</p>
<span>Followers</span>
</div>
<div>
<p>{user.following}</p>
<span>Following</span>
</div>
<div>
<p>{user.repos}</p>
<span>Repositories</span>
</div>
</div>
</Link>;
export default UsersCard;

در این قطعه کد ، ما از مؤلفه Link از re-router-dom استفاده کردیم تا کاربر بتواند در هنگام کلیک بر روی کارت ، جزئیات مربوط به یک کاربر واحد را مشاهده کند. بنابراین ، برای یک کارت کاربر خاص با شناسه 10009 ، کامپوننت Link ، URL ای به صورت زیر ایجاد می کند:
http://your-app/current-page/10009
http://your-app/current-page آدرس URL موجود را نشان می دهد.
10009 شناسه کاربر را نشان می دهد.
با ارائه مؤلفه ، تمام این اطلاعات منتقل می شود. این مؤلفه به شکل زیر است:
/** src/Nav/UsersCard.css **/
.card {
border-radius: 2px;
background-color: #ffffff;
box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.05);
max-width: 228px;
margin: 10px;
display: flex;
flex-direction: column;
align-items: center;
padding: 0;
}
.card img {
width: 50px;
height: auto;
border-radius: 50%;
display: block;
padding: 15px 0;
}
.users-card__name {
font-weight: 400;
font-size: 16.5px;
line-height: 1.19;
letter-spacing: normal;
text-align: left;
color: #25292e;
}
.users-card__username {
font-size: 14px;
color: #707070;
}
.users-card__divider {
border: solid 0.5px #efefef;
width: 100%;
margin: 15px 0;
}
.users-card__stats {
display: flex;
}
.users-card__stats p {
font-size: 20px;
}
.users-card__stats div {
margin: 10px;
text-align: center;

}
.users-card__stats span {
color: #707070;
font-size: 12px;
}
Copy

مرحله 4 – لیست کردن همه کاربران
برای اینکه برنامه خود را برای لیست کاربران قرار دهیم ، ابتدا باید یک جزء UsersList ایجاد کنیم. در دیرکتوری src / Users ، فایلهای زیر را ایجاد کنید:
$ touch UsersList.js UsersList.css

بیایید UsersList.js را به شرح زیر ویرایش کنیم. ابتدا ورودی های لازم را ایجاد می کنیم:
// src/Users/UsersList.js
import React from ‘react’;
import UsersCard from ‘./UsersCard’;
import ‘./UsersList.css’;

const listOfUsersPerRow = (users, row, itemsPerRow, match) =>
users
.slice((row – 1) * itemsPerRow, row * itemsPerRow)
.map(user => <UsersCard user={user} key={user.id} match={match} />);

const listOfRows = (users, itemsPerRow, match) => {
const numberOfUsers = users.length;
const rows = Math.ceil(numberOfUsers / itemsPerRow);
return Array(rows)
.fill()
.map((val, rowIndex) => (
<div className=”columns”>
{listOfUsersPerRow(users, rowIndex + 1, itemsPerRow, match)}
</div>
));
};

//…

توابع listOfUsersPerRow و listOfRows به صورت دست به دست کار می کنند تا اطمینان حاصل شود که در هر سطر بیشتر از تعداد مشخص شده کارت نداریم. نکته بعدی که باید انجام شود استفاده از توابع برای ایجاد لیست کاربران به شرح زیر است:
//src/Users/UsersList.js
//…
const UsersList = ({ users, itemsPerRow = 2, match }) => (
<div className=”cards”>
<h3 className=”is-size-3 has-text-centered”>Users</h3>
{listOfRows(users, itemsPerRow, match)}
</div>
);
export default UsersList;

UsersList.css به صورت زیر ظاهر می شود:
/** src/Users/UsersList.css **/
.cards {
margin-left: 20px;
}
.columns {
margin-top: 0;
}

مرحله 5 – ایجاد نمای جزئیات کاربر
هنگامی که یک کارت کاربر از لیست کاربران کلیک می شود ، کارت تک کاربره تحت بخش جزئیات نمایش داده می شود. بیایید نحوه ساخت این مؤلفه را ببینیم.
فایل های زیر را در دیرکتوری src / Users ایجاد کنید:
$ touch UsersDetails.js UsersDetails.css

اکنون ، بیایید موارد زیر را به فایل UsersDetails.js اضافه کنیم:
// src/Users/UsersDetails.js
import React from ‘react’;
import UsersCard from ‘./UsersCard’;
const UsersDetails = ({ user, match }) => <div>
<h3 className=”is-size-3 has-text-centered”>Details</h3>
<UsersCard user={user} match={match} />
</div>;
export default UsersDetails;

مرحله 6 – ایجاد مؤلفه داشبورد
برای ساخت مؤلفه داشبورد ، UserList را نمایش می دهیم و هنگامی که یک کارت کلیک می شود ، بدون نیاز به لود مجدد صفحه ، جزئیات را در کنار صفحه نمایش می دهید.
بیایید ببینیم چگونه آن را عملی کنیم. یک فایل UsersDashboard.js را در فهرست کاربران ایجاد کنید:
$ touch UserDashboard.js

UserDashboard.js را ویرایش کنید تا به شرح زیر باشد:
// src/Users/UsersDashboard.js

import React from ‘react’;
import { Route } from ‘react-router-dom’;
import UsersList from ‘./UsersList’;
import UsersDetails from ‘./UsersDetails’;
const UsersDashboard = ({ users, user, match }) => (
<div className=”columns”>
<div className=”column”>
<UsersList users={users} match={match} />
</div>
<div className=”column”>
<Route
path={match.url + ‘/:id’}
render={props => (
<UsersDetails
user={
users.filter(
user => user.id === parseInt(props.match.params.id, 10)
)[0]
}
match={match}
/>
)}
/>
</div>
</div>
);
export default UsersDashboard;

در این بخش ، ما از مؤلفه Route ارائه شده توسط re-router-dom به عنوان یک جزء برای نمایش جزئیات خاص کاربر هنگام کلیک روی کارت ، استفاده کردیم.
حالا ، بیایید همه اینها را کنار هم بگذاریم. فایل src / App.js را به روز کنید تا به صورت زیر باشد:
// src/App.js
import React, { Component } from ‘react’;
import { Route, Redirect } from ‘react-router-dom’;
import Nav from ‘./Nav’;
import UsersList from ‘./Users/UsersList’;
import UsersDetails from ‘./Users/UsersDetails’;
import UsersDashboard from ‘./Users/UsersDashboard’;
import ‘./App.css’;
class App extends Component {
state = {
users: [
{
id: 39191,
avatar: ‘https://avatars0.githubusercontent.com/u/39191?v=4’,
name: ‘Paul Irish’,
username: ‘paulirish’,
followers: ’12k’,
following: ‘1k’,
repos: ‘1.5k’
},
//… other user data
]
};
render() {
return (
<div className=”App”>
<Nav />
<Route
path=”/dashboard”
render={props => (
<UsersDashboard users={this.state.users} {…props} />
)}
/>
<Redirect from=”/” to=”/dashboard”/>
<Redirect from=”/users” to=”/dashboard”/>
</div>
);
}
}

export default App;

مرحله 7 – تنظیم مسیریابی پاسخگو
وقتی کاربران از این برنامه بازدید می کنند ، صرف نظر از اندازه صفحه نمایش ، از این منظر و عملکرد مشابه برخوردار می شوند. در برنامه های تمام عیار ، بهتر است به کاربران تجربیاتی ارائه دهند که می توانند از آنها به درستی استفاده کنند. یکی از راه های انجام این کار ، ارائه خدماتی به آنهاست که با اندازه دقیق دستگاه آنها مطابقت دارند. اکنون می خواهیم به چگونگی انجام این کار در برنامه خود نگاهی بیندازیم.
هنگام بازدید از برنامه بر روی صفحه نمایش پهن ، کاربر به مسیر /dashboard برنامه هدایت می شود و هنگام مشاهده بر روی صفحه نمایش کوچکتر ، کاربر به مسیر /users برنامه هدایت می شود. بیایید ببینیم چگونه این کار را انجام دهیم.
فایل src / App.js را به روز کنید تا به این صورت باشد:
// src/App.js

import React, { Component } from ‘react’;
import { Route, Switch, Redirect } from ‘react-router-dom’;
import Media from ‘react-media’;
import Nav from ‘./Nav’;
import UsersList from ‘./Users/UsersList’;
import UsersDetails from ‘./Users/UsersDetails’;
import UsersDashboard from ‘./Users/UsersDashboard’;
import ‘./App.css’;

class App extends Component {
//set application state
[…]
render() {
return (
<div className=”App”>
<Nav />
<Media query=”(max-width: 599px)”>
{matches =>
matches ? (
<Switch>
<Route
exact
path=”/users”
render={props => (
<UsersList users={this.state.users} {…props} />
)}
/>
<Route
path=”/users/:id”
render={props => (
<UsersDetails
user={
this.state.users.filter(
user =>
user.id === parseInt(props.match.params.id, 10)
)[0]
}
{…props}
/>
)}
/>
<Redirect from=”/” to=”/users”/>
<Redirect from=”/dashboard” to=”/users”/>
</Switch>
)
[…]

در این بخش از مؤلفه media برای بررسی اندازه صفحه نمایش استفاده می کنیم. اگر عرض صفحه نمایش از 599 پیکسل کمتر باشد ، آنچه را که می خواهیم برای مسیرهای مختلف نمایش داده شود تعیین می کنیم و همچنین مسیرهای / و /dashboard را به مسیر /users تغییر می دهیم.
اگر اندازه صفحه نمایش از پیکسل بیشتر باشد ، پیش می رویم و داشبورد کامل کاربر را مشابه قبل، نمایش می دهیم:
// src/App.js
[…]
: (
<Switch>
<Route
path=”/dashboard”
render={props => (
<UsersDashboard users={this.state.users} {…props} />
)}
/>
<Redirect from=”/” to=”/dashboard”/>
<Redirect from=”/users” to=”/dashboard”/>
</Switch>
)
}
</Media>
</div>
);
}
}

export default App;

در این مرحله ، می بینیم که بهتر است از مسیرهای مختلف بر اساس اندازه صفحه نمایش ، به جای استفاده از درخواست های رسانه استفاده کنیم ، زیرا اکنون می توانید بر اساس اندازه دستگاه های خود ، بخش های ویژه ای را به کاربران ارائه دهید.

نتیجه
در این مقاله ، ما مقدمه ای برای مسیریابی مبتنی بر مؤلفه با React و نحوه اجرای رندر مشروط در برنامه های React را دیدیم. در اینجا پیوندی به منبع کامل Github وجود دارد. حتما در بخش نظرات، کامنت و پیشنهادات خود را بگذارید.

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

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade