Реагирующий маршрутизатор

В этом уроке вы узнаете о React Router.

Оглавление

Введение
Что такое реактивный маршрутизатор?
Как установить реактивный маршрутизатор?
Маршрутизация

Введение

Что такое реактивный маршрутизатор?
Маршрутизатор React — это библиотека маршрутизации, построенная поверх реакции, которая используется для создания маршрутизации в приложениях реакции.

Является ли реактивный маршрутизатор статическим или динамическим?

В одностраничных приложениях есть только одна HTML-страница. Мы повторно используем одну и ту же HTML-страницу для отображения различных компонентов на основе навигации.

Но в многостраничных приложениях вы получите совершенно новую страницу с сервера при навигации.

Начиная

Как установить реактивный маршрутизатор?
мы используем приложение create-реагировать для создания приложения.

маршрутизация приложения npx create-реагировать
cd-маршрутизация

Чтобы установить реактивный маршрутизатор, вам необходимо загрузить пакет react-router-dom, выполнив следующие команды.

npm установить реакцию-маршрутизатор-дом
npm start // для запуска сервера разработки

Теперь откройте папку маршрутизации в вашем любимом редакторе кода.
Если вы перейдете к public/index.html, вы увидите один HTML-файл, который выглядит следующим образом.

<голова>
<мета-кодировка="utf-8">

Приложение React

<тело>

В настоящее время в нашем приложении есть только один компонент приложения.
Создадим еще два компонента.

пользователи.js
импортировать React из «реагировать»
класс Пользователи расширяет React.Component {
оказывать() {
вернуть
Пользователи
}
}
экспортировать пользователей по умолчанию
контакт.js
импортировать React из «реагировать»
класс Contact расширяет React.Component {
оказывать() {
вернуть
Контакт
}
}
экспорт по умолчанию Контакт
app.js
импортировать React из «реагировать»
Приложение класса расширяет React.Component {
оказывать() {
возвращаться (
<дел>
Главная

)
}
}
экспортировать приложение по умолчанию

Теперь наше приложение состоит из трех компонентов: один — приложение, а два других — пользователи и контакт.

Маршрутизация
откройте файл index.js и импортируйте три компонента (приложение, пользователи, контакт)

index.js
импортировать React из «реагировать»
импортировать ReactDOM из ‘react-dom’
импортировать ‘./index.css’
импортировать приложение из ‘./App’
импортировать пользователей из ‘./users’
импортировать контакт из ‘./contact’
ReactDOM.render(, document.getElementById(‘root’))

Маршрутизатор React дает нам три компонента [Route,Link,BrowserRouter] которые помогают нам реализовать маршрутизацию.

index.js
импортировать React из «реагировать»
импортировать ReactDOM из ‘react-dom’
импортировать {Route, Link, BrowserRouter as Router} из ‘react-router-dom’
импортировать ‘./index.css’
импортировать приложение из ‘./App’
импортировать пользователей из ‘./users’
импортировать контакт из ‘./contact’
ReactDOM.render(, document.getElementById(‘root’))

Реализуем маршрутизацию.

В компоненте Route нам нужно передать два реквизита

— путь: это означает, что нам нужно указать путь.
— component: пользователь какого компонента должен видеть, когда он перейдет по этому пути.

импортировать React из «реагировать»
импортировать ReactDOM из ‘react-dom’
импортировать ‘./index.css’
импортировать {Route, Link, BrowserRouter as Router} из ‘react-router-dom’
импортировать приложение из ‘./App’
импортировать пользователей из ‘./users’
импортировать контакт из ‘./contact’
постоянная маршрутизация = (
<Маршрутизатор>
<дел>

)
ReactDOM.render(маршрутизация, document.getElementById(‘root’))

Теперь, если вы введете вручную localhost:3000/users, вы увидите, что компонент Users отображается.

Но, тем не менее, компонент Home также отображается на экране, это происходит из-за того, что наш домашний путь — «/», а путь пользователя — «/users». Косая черта одинакова в обоих путях, поэтому он отображает оба компонента, чтобы остановить это поведение, которое нам нужно использовать. точная опора.