Реагирующий маршрутизатор | Кодементор

В этом уроке вы узнаете о 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 отображается.

1_tfk9YLjHYgoBmKosy_9pLg.png

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

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


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

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

Добавление навигации с использованием компонента Link

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

<Точный путь = "/" component={App} />


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

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

1_MlZsm9rZ_vtBxqVq3JhskQ.png