React Router
React Router - это библиотека для реализации маршрутизации на стороне клиента в
React-приложениях
.
Обратите внимание: данное руководство посвящено React Router
5 версии, в 6 версии API
рассматриваемой библиотеки претерпело несколько значительных изменений.
Примеры
Основная маршрутизация
В приведенном ниже примере у нас имеется 3 страницы, обрабатываемые роутером: главная (home), контакты (about) и страница с пользователями (users). При клике по <Link>
(ссылке) роутер рендерит соответствующий <Route>
(маршрут, путь).
Обратите внимание: за сценой <Link>
рендерит <a>
с настоящим href
, так что люди, использующие клавиатуру для навигации или экранные считываюющие устройства (screen readers), смогут без проблем пользоваться приложением.
import React from 'react'
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from 'react-router-dom'
export const App = () => (
<Router>
<header>
<nav>
<ul>
<li>
<Link to="/">Главная</Link>
</li>
<li>
<Link to="/about">Контакты</Link>
</li>
<li>
<Link to="/users">Пользователи</Link>
</li>
</ul>
</nav>
</header>
<main>
{/* <Switch> рендер ит первый <Route>, совпавший с URL */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</main>
</Router>
)
const Home = () => <h2>Главная</h2>
const About = () => <h2>Контакты</h2>
const Users = () => <h2>Пользователи</h2>
Вложенный роутинг
Ниже приводится пример вложенного роутинга. Маршрут /topics
загружает компонент Topics
, который, в свою очередь, рендерит дальнейшие <Route>
на основе значения :id
.
import React from "react"
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useRouteMatch,
useParams
} from "react-router-dom"
export const App = () => (
<Router>
<header>
<nav>
<ul>
<li>
<Link to="/">Главная</Link>
</li>
<li>
<Link to="/about">Контакты</Link>
</li>
<li>
<Link to="/topics">Темы</Link>
</li>
</ul>
</nav>
</header>
<main>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/topics">
<Topics />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</main>
</Router>
)
const Home = () => <h2>Главная</h2>
const About = () => <h2>Контакты</h2>
function Topics() {
const match = useRouteMatch()
return (
<>
<h2>Темы</h2>
<nav>
<ul>
<li>
<Link to={`${match.url}/components`}>Компоненты</Link>
</li>
<li>
<Link to={`${match.url}/props-vs-state`}>Пропы прот ив состояния</Link>
</li>
</ul>
</nav>
{/* Страница Topics имеет собственный <Switch> с маршрутами,
основанными на URL /topics. Вы можете думать о втором
<Route> как о странице для остальных тем
или как о странице, отображаемой,
когда ни одна из тем не выбрана */}
<div>
<Switch>
<Route path={`${match.path}/:topicId`}>
<Topic />
</Route>
<Route path={match.path}>
<h3>Пожалуйста, выберите тему.</h3>
</Route>
</Switch>
</div>
</>
)
}
function Topic() {
const { topicId } = useParams()
return <h3>Идентификатор выбранной темы: {topicId}</h3>
}
Основные компоненты
В React Router
существует 3 категории компонентов:
- роутеры (routers), например,
<BrowserRouter>
или<HashRouter>
- маршруты (route matchers), например,
<Route>
или<Switch>
- и навигация (navigation), например,
<Link>
,<NavLink>
или<Redirect>
Все компоненты, используемые в веб-приложении, должны быть импортированы из react-router-dom
.
Роутеры
Любая маршрутизация начинается с роутера. Для веб-проектов react-router-dom
предоставляет <BrowserRouter>
и <HashRouter>
. Основное отличие между ними состоит в способе хранения URL и взаимодействия с сервером.
<BrowserRouter>
используе т обычные URL. В этом случае URL выглядят как обычно, но требуется определенная настройка сервера. В частности, сервер должен обслуживать все страницы, используемые на клиенте.Create React App
поддерживает это из коробки в режиме разработки и содержит инструкции для правильной настройки сервера.<HashRouter>
хранить текущую локацию в хэш-части URL (после символа "#"), поэтому URL выглядит примерно так:http://example.com/#/your/page
. Поскольку хэш не отправляется серверу, его специальная настройка не требуется.
Для использования роутера необходимо обернуть в него компонент верхнего уровня:
import React from "react"
import ReactDOM from "react-dom"
import { BrowserRouter } from "react-router-dom"
const App = () => <h1>Привет, React Router</h1>
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
)