В този урок за React ще разгледаме React router – специфична библиотека за обработка на маршрути в рамките на уеб приложение. В основата си това, което React Router прави, е условно изобразяване на определени компоненти за показване в зависимост от маршрута, използван в URL адреса (/ за началната страница).

Защо да използвате React рутер? Той ви позволява да създавате едностранични уеб приложения (SPA) с навигация. React Router използва компонентна структура за извикване на компоненти, които показват подходящата информация.

React рутерът също позволява на потребителя да използва функционалността на браузъра като бутона за връщане назад и страницата за опресняване, като същевременно поддържа правилния изглед на приложението.

Ето какво ще бъде покрито:

  • Какво е React Router?
  • Страната на клиента срещу страната на сървъра
  • React Router срещу React Router DOM
  • Приложения с една страница (SPA)
  • Урок за React Router: Добавяне на навигация към вашето приложение React
  • Предимства на React Router

Какво е React Router?

React router е библиотека, която ви позволява да управлявате маршрути в уеб приложение, използвайки динамично маршрутизиране. Динамичното маршрутизиране се извършва, докато приложението се изобразява на вашата машина, за разлика от старата архитектура за маршрутизиране, където маршрутизирането се обработва в конфигурация извън работещо приложение.

React рутерът прилага базиран на компоненти подход за маршрутизиране. Той предоставя различни компоненти за маршрутизиране според нуждите на приложението и платформата.

Ето едно наистина просто приложение с една страница (SPA), което прилага маршрутизиране с помощта на React Router. За практическа практика с всички налични компоненти вижте интерактивния СПА от оригиналната статия!

routes.js:

import React from 'react';
import { Home } from './views/Home';
import { About } from './views/About';
import { NavBar } from './components/NavBar';
import { Route, Switch, Redirect } from 'react-router-dom';

export const Routes = () => {
  return (
    <div>
      <NavBar />
      <Switch>
        <Route exact path="/Home" component={Home} />
        <Route exact path="/">
          <Redirect to="/Home" />
        </Route>
        <Route exact path="/About" component={About} />
      </Switch>
    </div>
  );
};

index.js:

import React from 'react';

import ReactDOM from 'react-dom';
import App from './app.js';
import { BrowserRouter as Router } from 'react-router-dom';
import { Routes } from './routes'; // where we are going to specify our routes

ReactDOM.render(
  <Router>
    <Routes />
  </Router>,
  document.getElementById('root')
);

Изход:

Има един компонент NavBar, който се появява в горната част на приложението и позволява превключване между различни изгледи, а именно Home и About. Файлът router.js е мястото, където могат да бъдат дефинирани всички маршрути на SPA.

В routes.js първо се импортират компонентите, изгледите и необходимите пакети (редове 1-5). След това се дефинират всички тези маршрути, които SPA може да предприеме, запазвайки компонента Home като маршрут по подразбиране (ред 13-15). След това всички възможни маршрути просто се добавят с помощта на следния шаблон, между тагове <Switch>:

<Route exact path="/specifiedPath" component={componentName} />

Компонентът (componentName) ще бъде изобразен, когато "/specifiedPath" бъде посетен в уеб приложението.

Импортирането на тези маршрути от routes.js към index.js файл и поставянето им в етикет <Router> е всичко, което е необходимо като последна стъпка.

React Router може да се инсталира с помощта на помощната програма npm:

> npm install react-router-dom

… и след това може да се импортира и използва в SPAs.

Клиент срещу страна на сървъра

Не можем да водим разговор за маршрутизиране и React Router, без да споменем клиентската и сървърната страна. Клиентската страна е браузърът. Обработката му се извършва на локалната машина.

Страната на сървъра е мястото, където информацията се обработва и след това се изпраща до браузър.

От страната на сървъра означава, че действието се извършва на уеб сървър. Повечето JavaScript могат да бъдат направени без достъп до уеб сървър. От страна на клиента означава, че JavaScript кодът се изпълнява на клиентската машина или браузъра, когато говорим за уеб приложения. JavaScript от страна на сървъра означава, че кодът се изпълнява на сървъра, който обслужва уеб страници.

React Router срещу React Router DOM

DOM на React Router е DOM обвързващ за React Router или казано по-просто React Router за уебсайтове. За разлика от това, React-Router-Native е обвързващ за среда за разработка на приложения, използваща React Native.

За да се върнем към нашите теми за разработка в мрежа срещу естествено, React Router се предлага в 2 варианта, точно като React:

  • Уеб
  • Натив

Приложения с една страница

Приложенията с една страница динамично пренаписват уеб страницата с нови данни от сървъра, вместо метода по подразбиране браузърът да зарежда изцяло нови страници.

Когато потребител щракне върху връзка, вие не отивате на изцяло нова страница. Вместо това новият контекст се зарежда вграден на същата страница, на която вече сте. Така че се изобразяват само необходимите компоненти на страницата.

Щракнете върху г-жа Майсал

Приложенията с една страница могат да направят уебсайта да изглежда по-скоро като родно приложение. Много уеб страници са написани като приложения с една страница, където всеки компонент се изобразява независимо.

Приложенията с една страница са мястото, където React Routing влиза в игра. Когато хората използват уебсайт, има някои неща, които очакват да работят - като бутона за връщане назад в браузъра или URL адреса, който обозначава изгледа, който гледат в момента.

Това може да стане сложно за разработчика при изграждането на приложения с една страница. Има проблем с „дълбоката връзка“. Някои части от информацията в приложение за една страница може да са заровени дълбоко под много компоненти.

И така, как разработчикът гарантира, че правилният URL адрес, показващ този компонент, се показва в адресната лента?

Чрез направяне. React Router е JavaScript библиотека, която предоставя възможности за маршрутизиране на приложения с една страница, изградени в React.

Концептуални стъпки за изграждане на приложение с една страница:

  • 1. Основен родителски компонента
  • 2. Първоначален кадър: статичен (известен още като рамка на приложение):
  • Може да бъде един невидим HTML елемент, който действа като контейнер за цялото съдържание на уеб страниците, или може да бъде заглавка или заглавие.
  • В графиката на Dogs SPA по-горе — двата компонента отляво, показващи „Контакт“ и „Грижа 101“, остават същите и в двата изгледа на SPA. Централната секция изобразява картина на г-жа Майзел, когато се щракне върху тази връзка.
  • 3. React Router дефинира Routing Region:
  • Връзки за навигация
  • Контейнер за зареждане на съдържание – в нашата снимка към графиката по-горе – централната област, където се показва снимката на г-жа Майзел.
  • 4. Компонентът осигурява основатаза навигацията и обработката на историята на браузъра, така че потребителите да могат да използват бутоните за връщане назад и напред.

Урок за React Router: Добавяне на навигация към вашето приложение React

Нека направим бърз пример, за да видим самите основи на React Router. Ще направим React Router уеб за нашия пример. Първо, ще следваме някои оперативни стъпки, за да стартираме примера на React Router, след което ще се потопим в кода на JavaScript в дълбочина.

HTML:

<div id='root'></div>

JavaScript:

const {
  BrowserRouter,
  Route,
  Link
} = ReactRouterDOM

// Set up pages using the React Router Link element for navigation - instead of <a></a>
const App = () => (
  <div>
    <h1>React Router Example</h1>
    <ul role="nav">
      <li><Link to="/client">Client Side</Link></li>
      <li><Link to="/server">Server Side</Link></li>
    </ul>
     
    <div>
      <Route path='/client' component={Client} />
      <Route path='/server' component={Server} />
    </div>
  </div>
)

// Populate sample pages. 
const Client= () => <h3>What is client side?<body><li>Browser</li><li>Runs on local machine</li><li>React renders user interface</li><li>React Router adds clickable links</li></body></h3>

const Server= () => <h3>What is server side?<li>node.js - JavaScript everywhere!</li></h3>

//Render app into the root HTML DOM node
ReactDOM.render((
  <BrowserRouter>
    <App/>
  </BrowserRouter>
), document.getElementById('root'));

Когато стартирате кода, трябва да видите този резултат:

Тези връзки вече ще могат да се кликват благодарение на React Router! Сега можете да подобрите това и да добавите CSS, но за този пример ще го запазим просто.

Сега, нека се потопим в това, което всъщност се случва с този код:

Разбиване на JavaScript

Част 1: Render() Функция

//Render app into the root HTML DOM node
ReactDOM.render((
  <BrowserRouter>
    <App/>
  </BrowserRouter>
), document.getElementById('root'));
  • Опресняване от по-ранна статия в React за функцията render():
  • Render() взема логиката от елемента React от страната на JavaScript и я показва в потребителския интерфейс.
  • React елементите са обикновени обекти, които са евтини за създаване, за разлика от DOM обектите. Скоростта е предимство на React. React DOM актуализира основния DOM възел в HTML прозореца, за да покаже изобразяването на React елемента в потребителския интерфейс.
  • <BrowserRouter> тагове:
  • Настройте приложението си да работи с React Router, като опаковате приложението в елемент <BrowserRouter>. Всичко, което се визуализира, влиза в тага на елемента <BrowserRouter>.
  • Тагът на приложението се отнася до функцията const App = () =› App в кода на JavaScript.

Част 2: Секция за примерни страници

// Populate sample pages. 
const Client= () => <h3>What is client side?<body><li>Browser</li><li>Runs on local machine</li><li>React renders user interface</li><li>React Router adds clickable links</li></body></h3>

const Server= () => <h3>What is server side?<li>node.js - JavaScript everywhere!</li></h3>
  • В този пример примерните страници са направени чрез HTML тагове. В реално приложение примерните страници може да бъдат попълнени от API или да бъдат в отделни отделни JavaScript файлове в един и същи проект, тъй като страниците могат да се усложнят.

Част 3: Функция на приложението

  • Да започнем с <Route> тагове. <Route> таговете представляват връзки между компонентите. Маршрутните маркери са синтаксис на React Router, подобен на <a> таговете в нормален HTML.
<div>
    <Route path='/client' component={Client} />
    <Route path='/server' component={Server} />
</div>
  • Тук добавихме 2 маршрута. Нека разгледаме първия примерен клиент на Route:
  • „component={Client}“ казва на JavaScript да се свърже към примерната страница на const Client
  • Route path='/client' казва на JavaScript да добави „/client“ към URL адреса, когато щракнете върху тази връзка
  • Функция на приложението: Елемент на връзка — добавете връзки, върху които може да се кликне!
<ul role="nav">
      <li><Link to="/client">Client Side</Link></li>
      <li><Link to="/server">Server Side</Link></li>
</ul>

Предимства на React Router:

  • Добавете маршрутизиране към различни изгледи/компоненти на приложения с една страница
  • Съставим
  • Лесно добавяне на връзки след проектиране на уеб страницата
  • React Router условно изобразява определени компоненти в зависимост от маршрута от URL адреса.

Обобщавайки

Сега, след като проучихте React Router и неговите възможности, е време да започнете да създавате свои собствени React приложения.

Курсът React Tracked: Създаване на уеб приложения с глобално състояние е страхотно базирано на проекти място за започване. През цялото време ще научите всички тънкости на React и до края ще сте изградили напълно функционално приложение за хакерски новини, което ще бъде чудесно допълнение към вашето портфолио.

Приятно учене!

Продължете да четете за React on Educative

Започнете дискусия

Защо искате да подобрите вашите React умения и знания? Беше ли полезна тази статия? Кажете ни в коментарите по-долу!