Главная » Статьи » Понимание React Router на примере простого блога

Понимание React Router на примере простого блога

Понимание React Router на примере простого блога

От автора: React router, пожалуй, одна из самых крутых функций React. Это известная библиотека, и всем, кто изучает React, нужно знать то, как ее использовать. Причина очень проста. При использовании веб-сайта пользователям важно иметь возможность беспрепятственно просматривать разные страницы или переходить с одной страницы на другую. React Router — библиотека, которая делает это возможным.

React создает одностраничное приложение, а React router играет важную роль для отображения нескольких представлений без необходимости перезагружать браузер в одностраничном приложении.

Стоит отметить, что без React Router практически невозможно отобразить несколько представлений в одностраничных приложениях React. Примеры веб-сайтов, которые используют React router для отображения нескольких представлений, включают, помимо прочего, Facebook, Instagram, Twitter.

Этот урок будет разделен на два раздела. В первом разделе (часть 1) мы собираемся изучить некоторые основы React Routing:

Что такое маршрутизация?

Что такое React Router DOM

Простое объяснение BrowserRouter, Route, Switch и Link

И, наконец, мы рассмотрим React Router с хуками, сосредоточившись на useHistory, useParam и useLocation.

Во втором разделе (часть 2) мы собираемся использовать все знания, полученные в первом разделе, для создания простого многостраничного блога.

ЧАСТЬ 1

Что такое маршрутизация

Маршрутизация позволяет переходить от одного представления к другому в веб-приложении на основе действия или запроса. Это возможность переходить с одной страницы на другую, когда пользователь кликает на какой-либо элемент в приложении, например ссылку, кнопку, значок, изображение и т. д.

Другими словами, это процесс, в котором пользователь направляется на разные страницы в зависимости от его действий.

React Router используется для создания различных маршрутов в одностраничном приложении. Это стандартный пакет маршрутизации, используемый для реагирования на изменение представлений и перемещение между страницами.

Например, когда пользователь вводит определенный URL-адрес в браузер, он перенаправляется на этот конкретный маршрут, если путь URL-адреса совпадает с каким-либо маршрутом внутри файла маршрутизатора с помощью React Router без перезагрузки браузера.

Чтобы использовать React Router, нам нужно будет использовать пакет React-Router-DOM. Мы рассмотрим его в следующем разделе.

Что такое React Router DOM

Теперь, когда у нас есть базовое представление о React Router, давайте бегло взглянем на React-Router-DOM. React Router DOM — это модуль узла, который предназначен для маршрутизации в веб-приложениях. Он позволяет инженерам создавать маршруты для одностраничного приложения React. Достаточно просто. Далее рассмотрим компоненты React Router.

BrowserRouter, Route, Switch и Link

BrowserRouter, Route, Switch и Link — все это компоненты React-Router. Эти компоненты делятся на три категории.

К первой категории относятся, например, маршрутизаторы <BrowserRouter>. Вторая категория — это сопоставители маршрутов, такие как <Route> и <Switch>, и последняя категория — это навигация, например <Link> и <Redirect>. Давайте рассмотрим каждый из этих компонентов по отдельности.

<BrowserRouter>: BrowerRouter — это реализация маршрутизатора, которая может включать маршрутизацию в React. Он использует API HTML5, который включает pushState, replaceState и событие popState, чтобы пользовательский интерфейс синхронизировался с URL-адресом. Это родительский компонент, который используется для хранения всех других компонентов и использует обычные URL-адреса.

<Route>: Route — это условный компонент, который отображает компонент на основе определенного URL-адреса или того URL-адреса, на который указывает данный компонент. Другими словами, это компонент, который отображает некоторый пользовательский интерфейс, когда его путь совпадает с текущим URL-адресом.

<Link>: Компонент Link используется для создания ссылок на разные маршруты и реализует навигацию по приложению. Links принимает свойство, которое указывает, куда мы хотим, чтобы ссылка переместила нашего пользователя.

<Switch>: Компонент switch используется для визуализации только первого маршрута, который соответствует местоположению, а не для визуализации всех совпадающих маршрутов.

Помимо всех этих мощных компонентов, есть несколько очень полезных хуков, которые действительно помогают, предоставляя дополнительную информацию, которую мы можем использовать в наших компонентах. Это: useHistory, useParam, и useLocation.

useHistory

Согласно документации react router, хук useHistory дает вам доступ к экземпляру истории, который вы можете использовать для навигации. Через объект истории мы можем получить доступ и управлять текущим состоянием истории браузера.

useParam

Хук useParam возвращает объект пары ключ/значение параметров URL, где ключ — это имя параметра, а значение — текущее значение параметра. Другими словами, он обеспечивает доступ к параметрам поиска в URL.

useLocation

Хук useLocation эквивалентен useState, но при изменении URL-адреса возвращает новое местоположение. Проще говоря, хук useLocation возвращает объект местоположения, представляющий текущий URL.

ЧАСТЬ 2

Теперь пришло время использовать знания, полученные в первом разделе, для создания одностраничного приложения для блога, чтобы мы могли лучше понять маршрутизацию в React. В нашем блоге будет панель навигации, включающая следующие функции:

Страница регистрации / входа

Добавить новое сообщение

Показать все сообщения

Кнопка переключения для создания нового сообщения

404 стр.

И, наконец, мы собираемся использовать react router, чтобы связать все наши страницы вместе, чтобы пользователь мог легко перемещаться между страницами в нашем приложении.

Чтобы продолжить, клонируйте репо отсюда и запустите приложение на своем локальном компьютере, используя npm start. Вы должны увидеть снимок экрана ниже в своем браузере.

Понимание React Router на примере простого блога

Теперь пришло время реализовать маршрутизацию в нашем приложении, чтобы сделать его динамическим. Давай начнем!

Шаг 1

Нам нужно установить react-router-dom через npm для обработки маршрутизации, запустив в терминале:

npm install react-router-dom

Шаг 2

Позволяет извлечь код из нашего файла Home.jsx и создать новый файл: Navbar.jsx. Вырежьте следующие фрагменты кода из компонента Home и вставьте его в файл Navbar.jsx.

<h2>Nicole's Blog.</h2>
<div className='navbar__list'> <ul> <li> Register </li> <li> Login </li> <li> Write a Story </li> </ul>
</div>

Теперь давайте обновим наш файл Navbar.jsx, добавив следующие строки кода.

import React from 'react';
import '../styles/Navbar.css';
import {Link} from 'react-router-dom'
function Navbar() { return ( <div className='navbar'> <h2>Nicole's Blog.</h2> <div className='navbar__list'> <ul> <li> <Link to="/Login">Login</Link> </li> <li> <Link to="/Register">Register</Link> </li> <li> <Link to="/CreatePost">Write a Story</Link> </li> </ul> </div> </div> )
}
export default Navbar

Здесь мы импортировали Link из react-router-dom. Link похож на тег привязки <a> с атрибутом href в HTML. Он имеет аналогичную функциональность и делает то же самое, что и тег привязки.

Поэтому вместо использования <a href> мы использовали Link to. Например, при нажатии кнопки «Войти» на панели навигации пользователь перенаправляется на страницу Login без обновления или перезагрузки страницы. Это относится ко всем остальным ссылкам на панели навигации.

Шаг 3

Теперь пришло время импортировать все наши компоненты в файл App.js и посмотреть, как мы можем использовать категории, которые мы узнали в первой части этой статьи, чтобы сделать приложение для блога полностью динамичным, например:

import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Home from './Components/Home';
import Login from './Components/Login';
import Register from './Components/Register';
import CreatePost from './Components/CreatePost';
import AllPost from './Components/AllPost';
import Navbar from './Components/Navbar';
function App() { return ( <BrowserRouter> <div className="App"> <Navbar /> <Switch> <Route exact path='/' component={Home}> <Home /> </Route> <Route exact path='/Register' component={Register}> <Register /> </Route> <Route exact path='/Login' component={Login}> <Login /> </Route> <Route exact path='/CreatePost' component={CreatePost}> <CreatePost /> </Route> <Route exact path='/AllPost' component={AllPost}> <AllPost /> </Route> </Switch> </div> </BrowserRouter> );
}
export default App;

Вот как мы включили в наше приложение response-router. Сначала мы импортировали {BrowserRouter, Route, Switch} из «response-router-dom». Помните, что в первой части этой статьи мы говорили о возможности <BrowserRouter> включения маршрутизации в React. Это объясняет, почему мы обертываем все наши компоненты, в которые должна входить маршрутизация.

Перед компонентом Switch, мы рендерим компонент Navbar. Это потому, что мы хотим, чтобы наша панель навигации была доступна для всех страниц нашего приложения.

Мы также использовали компонент Switch для рендеринга первого маршрута, соответствующего местоположению, а не для рендеринга всех совпадающих маршрутов. Если мы исключим компонент Switch из нашего кода, все маршруты будут отображаться на одной странице.

Как мы уже знаем, Route компонентная база отображается по URL-адресу. В приведенном выше коде мы дали Routes разные значения path в зависимости от того, что мы хотим отображать в нашем браузере. Мы также указали компонент, добавив свойство component и установив его для компонента, который мы хотим визуализировать.

Еще в компоненте Route мы использовали ключевое слово exact, чтобы указать точный путь для специфичности. В противном случае, когда компонент Switch видит «/» в нашем URL-адресе, он будет отображать только первый маршрут сразу под ним, даже если мы укажем путь, который хотим отобразить.

Чтобы лучше понять это, попробуйте удалить ключевое слово exact из компонента Route. Просто поэкспериментируйте с кодом, чтобы добиться большей ясности. В строках:

<Route exact path='/' component={Home}> <Home />

мы не указали путь к нашему маршруту, но мы передали свойство Home, потому что хотим иметь возможность отображать страницу Home, когда пользователь посещает страницу в первый раз.

Перенаправление

Давайте продемонстрируем функцию, которая позволит только авторизованным или зарегистрированным пользователям писать статьи в нашем блоге. Мы собираемся сделать это внутри файла App.js, используя Redirect компонент:

import {BrowserRouter, Route, Switch, Redirect} from 'react-router-dom'; <Redirect from='/CreatePost' to='/Register' />

Это очень понятно. Здесь мы импортировали Redirect компонент из response-router-dom, как и другой компонент, и используем его для перенаправления нашего пользователя (незарегистрированного пользователя) на страницу Register, когда он пытается написать статью без предварительной регистрации / авторизации.

404 Страница

Наконец, давайте добавим в наше приложение страницу 404, чтобы, если пользователь кликнет или введет URL-адрес, которого нет в нашем приложении, такой пользователь будет перенаправлен на страницу 404. Снова создайте файл NotFound.jsx в папке компонентов и добавьте следующие фрагменты кода:

import React from 'react'
function NotFound() { return ( <div> <h1>404- Page not Found</h1> </div> )
}
export default NotFound

Затем импортируйте этот файл в файл App.js и добавьте следующее:

<Route component= {NotFound}> </Route>

Давайте это проверим. Когда я пытаюсь найти URL-адрес / страницу, которой нет в нашем приложении блога, меня перенаправляет на страницу 404:

Понимание React Router на примере простого блога

Заключение

Вкратце, мы рассмотрели маршрутизацию в React с точки зрения новичка, создав простое приложение для блога. Мы также рассмотрели response-router-dom и различные компоненты на примерах. Надеюсь, эта статья поможет вам ускорить создание вашего приложения. Вы можете найти код здесь. Спасибо за чтение!

Автор: Queen Nnakwue

Источник: blog.openreplay.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен