Как использовать React Router

Базовая настройка для React Router

React Router - это способ для нашего внешнего приложения иметь функциональные возможности навигации, которые отлично подходят для одностраничных приложений, поскольку он позволяет компоненту отображаться без обновления страницы. Никакого волшебства здесь нет. Под капотом React Router использует API истории, который используется для управления страницами, которые посетил пользователь, с помощью таких функций, как windows.history.back () и windows.history.forward (), чтобы перечислить некоторые из них. Теперь перейдем к React Router.

Начнем с установки пакета react-router-dom

npm install react-router-dom

Теперь импортируйте компоненты реактивного маршрутизатора: BrowserRouter и Route в index.js. BrowserRouter - это то, что позволяет нам иметь функциональность URL-адресов. Маршрут - это компонент, который мы также будем использовать.

//index.js
import {BrowserRouter as Router, Route} from 'react-router-dom'

BrowserRouter обычно переименовывается в «Маршрутизатор» на as.

Взгляните на приведенный ниже код. Вместо непосредственного рендеринга компонента <Home> с помощью ReactDOM.render мы используем компонент <Router> </Router>, который мы назвали, и оборачиваем его вокруг <Route/>.

Мы передадим в <Route/> два свойства: путь path="/" и компонент для рендеринга component={Home}. Компонент <Route/> отвечает за создание пары пути к компоненту, который нужно отрисовать. В примере ниже. Когда пользователь переходит на localhost: 3000 /, будет отображаться компонент <Home>. В демонстрационных целях я сделаю компонент Home в index.js

//index.js
import React from 'react'
import ReactDOM from 'react-dom
//step 1 import react-router components
import {BrowserRouter as Router, Route} from 'react-router-dom'
class Home extends React.Component {
	render(){
	  return (
	    <div>
	      <h1>Home Page!</h1>
	    </div>
	  )
	}
}
//step 2 
ReactDOM.render((
  <Router >
    <Route path="/" component={Home} />
  </Router>),
  document.getElementById('root')
)

Добавление дополнительных маршрутов

Давайте создадим <About /> компонент и <Login /> компонент и добавим их в <Router>, как мы это сделали с <Home />. Вместо path="" мы будем использовать exact path="". Точный путь, как следует из названия, означает, что путь должен быть точно '/ около', чтобы <Route /> отобразил <About/> компонент. Сделайте то же самое для входа в систему, но, конечно, установите точный путь к '/ login'. Выполнение следующего кода приведет к ошибке

//index.js
ReactDOM.render((
  <Router>
    <Route path="/" component={Home} />
    <Route exact path="/about" component={About} />
    <Route exact path="/login" component={Login} />
  </Router>),
  document.getElementById('root')
)

<Router></Router> может иметь только один дочерний компонент ... чтобы обойти это, оберните компоненты <Route> в ‹div› ‹/div›

//index.js 
ReactDOM.render((
  <Router>
    <div>
      <Route path="/" component={Home} />
      <Route exact path="/about" component={About} />
      <Route exact path="/login" component={Login} />
    </div>
  </Router>),
  document.getElementById('root')
)

Обратите внимание, что компонент <Home> отображается независимо от того, какой другой путь мы вводим в адресной строке. Это будет полезно, когда мы хотим, чтобы что-то отображалось на каждой странице. Чтобы домашний компонент отображался только на своем пути, мы можем использовать exact path.

ReactDOM.render((
  <Router>
    <div>
      <Route exact path="/" component={Home} />
      <Route exact path="/about" component={About} />
      <Route exact path="/login" component={Login} />
    </div>
  </Router>),
  document.getElementById('root')
)

Существует гораздо больше, чем можно сделать с помощью React Router, например, вложенная маршрутизация, динамическая маршрутизация и использование NavLinks в сочетании с маршрутами для дальнейшего улучшения одностраничных приложений, чтобы они чувствовали себя так, как будто они многостраничные приложения. Я открыт для отзывов! Спасибо за чтение!

Ресурсы:

Изображение

Продолжайте обучение с Flatiron: