Что мы строим

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

Установить зависимости

Вам понадобится установленный Node на вашем компьютере, но, поскольку вы читаете статью о React, я предполагаю, что вы это рассмотрели.

Сначала мы воспользуемся react create app, чтобы настроить наш проект.

npx create-react-app simple-router

Это создаст наш новый проект в папке под названием simple-router. Позволяет cd войти в simple-router и установить веб-версию реактивного маршрутизатора.

npm install react-router-dom --save

Хорошо, поскольку у нас есть все, что нам нужно, мы должны очистить все файлы из папок src и public, предоставленные приложением create-react-app, чтобы мы можно начать с нуля.

Получение нашего статического HTML

Сначала в общедоступном мы создадим новый index.html и добавим следующее:

Вот и все, это весь HTML, который нам понадобится для этого проекта. Теперь все о JavaScript.

Соберите компоненты

Вернувшись в нашу папку src, мы добавим файл index.js:

Если вы присмотритесь, то увидите, что мы импортируем некоторые CSS-файлы, но пока давайте сосредоточимся на компонентах, со стилем которых мы займемся чуть позже.

Хорошо, нам, очевидно, нужен компонент Nav, поэтому давайте добавим его в наш src

Мы импортируем еще несколько компонентов, которые у нас еще нет, и их легко исправить:

Ничего интересного, всего пара очень простых компонентов.

Модный стиль

Помните, как я сказал, что все будет о JavaScript. Ну почти, мы просто добавим несколько стилей очень быстро, в конце концов, никто не хочет, чтобы их приложение выглядело некрасиво. В нашей надежной папке src добавьте новый файл index.css:

Теперь, если вы запустите npm start со своего терминала и перейдете по адресу http: // localhost: 3000 /, вы должны увидеть что-то вроде этого:

Вернуться к маршрутам

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

На помощь приходит роутер.

Сначала вернемся в Nav.jsx, мы импортируем следующее:

import {
Route,
NavLink,
BrowserRouter
} from "react-router-dom";

Начиная с React Router V4, мы имеем дело только с компонентами React. Существует три типа компонентов: Маршрутизаторы, Соответствие маршрутов и Реквизиты для рендеринга маршрута.

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

<BrowserRouter>
<div>       
<h1>React Router Simple Starter</h1>            
    <ul className="header">
       <li><a className="active" href="/">Home</a></li>
       <li><a href="/blog">Stuff</a></li>
       <li><a href="/contact">Contact</a></li>
    </ul>
<div className="content"></div>    
</div>  
</BrowserRouter>

К сведению, в React Router доступны два компонента Router: BrowserRouter и HashRouter. Согласно официальной документации:

вы должны использовать <BrowserRouter>, если у вас есть сервер, который отвечает на запросы, и <HashRouter>, если вы используете статический файловый сервер

Или, проще говоря, BrowserRouter - это то, что вы будете чаще всего использовать на стороне клиента, а HashRouter обычно используется для рендеринга на стороне сервера.

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

Не паникуйте, это нормально, чтобы заставить это работать, нам понадобится наш компонент NavLink:

<BrowserRouter>
<div>       
<h1>React Router Simple Starter</h1>            
    <ul className="header">
       <li><NavLink to="/">Home</NavLink></li>
       <li><NavLink to="/blog">Stuff</a></li>
       <li><NavLink to="/contact">Contact</a></li>
    </ul>
<div className="content"></div>    
</div>  
</BrowserRouter>

Компонент NavLink представляет собой стилизованную версию компонента Ссылка, который добавляет атрибуты стиля к отображаемому элементу, когда он соответствует текущему URL-адресу. Имя класса по умолчанию - active, поэтому нам больше не нужно свойство className, нам действительно нужно изменить свойство href на to без каламбура.

Но что делает компонент Link, вы можете спросить себя, опять же, в документации React Router есть ответ:

Предоставляет декларативную доступную навигацию по вашему приложению.

Круто, давай нажимаем на блестящие навигационные ссылки ...

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

Сопоставление маршрута выполняется путем сравнения свойства <Route> path с pathname текущего местоположения. Когда <Route> совпадает, он отображает свое содержимое, а когда он не совпадает, он отображает null. <Route> без пути всегда будет соответствовать.

Хорошо, просто чтобы было немного проще. Когда вы нажимаете на компонент NavLink, это обновляет URL-адрес браузера, чтобы он соответствовал пути, равному to porp, переданному этому компоненту. Например, если мы нажмем на

<li><NavLink to="/blog">Stuff</a></li>

URL-адрес в нашем браузере изменится на myapp.com/blog. Затем React Router будет искать соответствующий путь, переданный компоненту Route, и покажет любой компонент, который мы установили для этого пути.

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

<BrowserRouter>
<div>
<h1>React Router Simple Starter</h1>
  <ul className="header">
    <li><NavLink exact to="/">Home</NavLink> </li>
    <li><NavLink to="/Blog">Blog</NavLink></li>
    <li><NavLink to="/Contact">Contact</NavLink></li>
  </ul>
<div className="content">
  <Route path="/" component={Home} />
  <Route path="/blog" component={Blog} />
  <Route path="/contact" component={Contact} />
</div>
</div>
</BrowserRouter>

Итак, мы говорим React Router, когда URL-адрес браузера совпадает с атрибутом path, чтобы показать компонент, переданный в свойство component на странице.

Свойство component является частью упомянутого ранее свойства рендеринга маршрута. Существует три варианта рендеринга компонента для данного маршрута: component, render и children. Нам не нужно рассматривать свойства рендеринга и дочерних элементов для этого начального проекта.

Примечание: есть еще один компонент Route Matching, предоставляемый React Router, - компонент Switch, но мы рассмотрим его позже. некоторые из будущих статей о расширенной маршрутизации, которые я запланировал.

Пришло время нажать на некоторые ссылки

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

Но подождите ... Что-то не так. Все выглядит отлично на домашней странице, но когда мы переходим на страницы блога или контактов, мы по-прежнему видим контент с домашней страницы.

Причина в том, что путь для загрузки нашего компонента Home - /. Наши компоненты Блог и Контакт также имеют символ / в своих путях. Это означает, что наш компонент Home всегда соответствует пути, по которому мы пытаемся перейти. Исправить это просто. В компоненте Route, представляющем наш домашний контент, мы добавим свойство exact. Итак, окончательная версия нашего файла Nav.jsx должна выглядеть так:

Вот и все, что теперь у вас есть знания для построения маршрутов в вашем приложении React с помощью React Router.

Спасибо за чтение! Надеюсь, эта статья была полезной, и вы узнали что-то новое. Как обычно, если у вас есть какие-либо вопросы или рекомендации, не стесняйтесь делиться ими в комментариях.