Понимание React Router на примере простого блога
React создает одностраничное приложение, а React router играет важную роль для отображения нескольких представлений без необходимости перезагружать браузер в одностраничном приложении.
Стоит отметить, что без React Router практически невозможно отобразить несколько представлений в одностраничных приложениях React. Примеры веб-сайтов, которые используют React router для отображения нескольких представлений, включают, помимо прочего, Facebook, Instagram, Twitter.
Этот урок будет разделен на два раздела. В первом разделе (часть 1) мы собираемся изучить некоторые основы React Routing:
Что такое маршрутизация?
React JS. Основы
Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения
Получить курс сейчас!
Что такое 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, чтобы связать все наши страницы вместе, чтобы пользователь мог легко перемещаться между страницами в нашем приложении.
Чтобы продолжить, клонируйте репо отсюда и запустите приложение на своем локальном компьютере, используя . Вы должны увидеть снимок экрана ниже в своем браузере.
Теперь пришло время реализовать маршрутизацию в нашем приложении, чтобы сделать его динамическим. Давай начнем!
Шаг 1
Нам нужно установить react-router-dom через npm для обработки маршрутизации, запустив в терминале:
React JS. Основы
Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения
Получить курс сейчас!
JavaScript npm install react-router-dom
| 1 | 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>
| 123456789101112131415 | <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, добавив следующие строки кода.
JavaScript 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
| 12345678910111213141516171819202122232425 | 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 и посмотреть, как мы можем использовать категории, которые мы узнали в первой части этой статьи, чтобы сделать приложение для блога полностью динамичным, например:
JavaScript 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;
| 12345678910111213141516171819202122232425262728293031323334 | 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 />
| 12 | <Route exact path=’/’ component={Home}> <Home /> |
мы не указали путь к нашему маршруту, но мы передали свойство Home, потому что хотим иметь возможность отображать страницу Home, когда пользователь посещает страницу в первый раз.
Перенаправление
Давайте продемонстрируем функцию, которая позволит только авторизованным или зарегистрированным пользователям писать статьи в нашем блоге. Мы собираемся сделать это внутри файла App.js, используя Redirect компонент:
JavaScript import {BrowserRouter, Route, Switch, Redirect} from ‘react-router-dom’; <Redirect from=’/CreatePost’ to=’/Register’ />
| 123 | 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 в папке компонентов и добавьте следующие фрагменты кода:
JavaScript import React from ‘react’ function NotFound() { return ( <div> <h1>404- Page not Found</h1> </div> ) } export default NotFound
| 123456789 | import React from ‘react’function NotFound() { return ( <div> <h1>404- Page not Found</h1> </div> )}export default NotFound |
Затем импортируйте этот файл в файл App.js и добавьте следующее:
JavaScript <Route component= {NotFound}> </Route>
| 123 | <Route component= {NotFound}> </Route> |
Давайте это проверим. Когда я пытаюсь найти URL-адрес / страницу, которой нет в нашем приложении блога, меня перенаправляет на страницу 404:
Заключение
Вкратце, мы рассмотрели маршрутизацию в React с точки зрения новичка, создав простое приложение для блога. Мы также рассмотрели response-router-dom и различные компоненты на примерах. Надеюсь, эта статья поможет вам ускорить создание вашего приложения. Вы можете найти код здесь. Спасибо за чтение!
Автор: Queen Nnakwue
Источник: webformyself.com