Введение в маршрутизатор React

• Установка
• Компоненты
• Маршрутизатор браузера
• Ссылка
• Маршрут
• Доступ к данным о местоположении внутри визуализированного компонента
• Программно измените маршрут
• Сопоставьте несколько путей
• Встроенный рендеринг
• Сопоставьте динамический параметр маршрута

React Router – это де-факто библиотека маршрутизации React, и это один из самых популярных проектов, созданных на основе React.

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

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

1. Браузер должен изменить URL-адрес при переходе на другой экран
2. Глубокая привязка должна работать: если вы укажете браузеру URL-адрес, приложение должно восстановить то же представление, которое было представлено при создании URL-адреса.
3. Кнопка браузер назад (и вперед) должна работать так, как ожидалось.

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

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

Установка

С помощью npm:

npm install react-router-dom

Компоненты

3 компонента, с которыми вы будете взаимодействовать больше всего при работе с маршрутизатором React, это:

• Маршрутизатор браузера , обычно именуемый как Маршрутизатор
• Ссылка
• Маршрут

Маршрутизатор браузера обертывает все компоненты вашего маршрута.

Ссылка Компоненты используются для создания ссылок на ваши маршруты

Компоненты маршрута отвечают за отображение – или скрытие – компонентов, которые они содержат.

Маршрутизатор браузера

Вот простой пример компонента маршрутизатора браузера. Вы импортируете его из react-router-dom и используете для упаковки всего своего приложения:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'

ReactDOM.render(
  
    
{/* ... */}
  ,
  document.getElementById('app')
)

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

Ссылка

Компонент Link используется для запуска новых маршрутов. Вы импортируете его из react-router-dom , и вы можете добавить компоненты связи, указывающие на разные маршруты, с атрибутом to :

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Link } from 'react-router-dom'

ReactDOM.render(
  
    

      
      {/* ... */}
    
  ,
  document.getElementById('app')
)

Маршрут

Теперь давайте добавим компонент маршрута в приведенный выше фрагмент, чтобы все работало так, как мы хотим:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'

const Dashboard = () => (
  

    
Dashboard
    ...
  
)

const About = () => (
  

    
About
    ...
  
)

ReactDOM.render(
  
    

      

      

        
        
      
    
  ,
  document.getElementById('app')
)

Проверьте этот пример на глюк: https://glitch.com/edit/#!/флавиокопы-реагируют-маршрутизатор-v4/

Когда маршрут совпадает / , приложение отображает компонент Панель мониторинга .

При изменении маршрута, нажав на ссылку “О программе”, перейдите по ссылке /о программе , компонент панели мониторинга удаляется, а компонент About вставляется в DOM.

Обратите внимание на атрибут точный . Без этого/|путь=”/” также соответствовал бы /о , так как /содержится в маршруте.

Доступ к данным о местоположении внутри визуализированного компонента

Внутри визуализированного компонента мы можем видеть, на каком маршруте мы находимся, используя использовать местоположение крюк:

import { useLocation } from 'react-router-dom'

//...

function Post() {
  const location = useLocation()

  console.log(location.pathname) // '/'
}

Программно измените маршрут

Внутри визуализируемого компонента вы можете программно изменить маршрут, используя историю использования крюк:

import { useHistory } from 'react-router-dom'

//...

function Post() {
  const history = useHistory()

  history.push('/post/new')
}

Сопоставьте несколько путей

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

Встроенный рендеринг

Вместо указания компонента свойства на Маршрут , вы также можете установить визуализацию опору:

 (
    

      
About
      ...
    
  )}
/>

Сопоставьте динамический параметр маршрута

Смотрите, как получить данные с динамического маршрута маршрутизатора React.

Оригинал: “https://flaviocopes.com/react-router/”