React Router — это популярная библиотека для создания одностраничных приложений с помощью React, библиотеки JavaScript для создания пользовательских интерфейсов. Это позволяет разработчикам создавать декларативную маршрутизацию для своих приложений React, упрощая навигацию между различными представлениями или компонентами в приложении.
Если вы новичок в React Router, это руководство для начинающих познакомит вас с основами работы.
Монтаж
Чтобы установить React Router, вам необходимо настроить проект React. Если у вас его еще нет, вы можете использовать команду create-react-app для настройки нового проекта:
npx create-react-app my-app cd my-app
После настройки проекта React вы можете установить React Router, выполнив следующую команду:
npm install react-router-dom
Или, если вы используете пряжу:
yarn add react-router-dom
Настройка маршрутов
Первым шагом в использовании React Router является настройка ваших маршрутов. Маршрут в React Router — это просто сопоставление пути URL-адреса и компонента React.
Чтобы настроить маршруты, вам нужно импортировать компонент Route
из react-router-dom
и использовать его для определения маршрутов. Вот пример того, как настроить два маршрута, один для домашней страницы, а другой для страницы «О нас»:
import { Route } from 'react-router-dom'; import Home from './Home'; import About from './About'; const App = () => ( <div> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> </div> );
В этом примере компонент Home
будет отображаться, когда пользователь переходит к пути /
, а компонент About
будет отображаться, когда пользователь переходит к пути /about
.
Навигация между маршрутами
Теперь, когда вы настроили свои маршруты, вам нужно, чтобы пользователи могли перемещаться между ними. Для этой цели используется компонент Link
из react-router-dom
. Вот пример использования компонента Link
для создания меню навигации:
import { Link } from 'react-router-dom'; const Nav = () => ( <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> </ul> );
Это создаст простое навигационное меню с двумя ссылками: одна для домашней страницы, а другая для страницы «О нас». Когда пользователь нажимает на ссылку, URL-адрес изменяется и отображается соответствующий маршрут.
Передать реквизиты маршрутам
Иногда вы можете захотеть передать реквизиты компоненту, который рендерится по маршруту. Вы можете сделать это, используя реквизит render
в компоненте Route
. Вот пример того, как передать свойство title
компоненту About
:
import { Route } from 'react-router-dom'; import About from './About'; const App = () => ( <div> <Route path="/about" render={() => <About title="About Us" />} /> </div> );
В этом примере компонент About
будет отображаться с реквизитом title
, равным «О нас».
Вложенные маршруты
Иногда вы можете захотеть вложить маршруты в другие маршруты. Это полезно для создания иерархии маршрутов, например блога с категориями и отдельными сообщениями.
Чтобы вложить маршруты, вы можете использовать компонент Route
внутри другого компонента, который визуализируется маршрутом. Вот пример того, как настроить блог с категориями и отдельными сообщениями:
import { Route } from 'react-router-dom'; import Blog from './Blog'; import Category from './Category'; import Post from './Post'; const App = () => ( <div> <Route exact path="/blog" component={Blog} /> <Route path="/blog/:category" component={Category} /> <Route path="/blog/:category/:post" component={Post} /> </div> );
В этом примере компонент Blog
будет отображаться, когда пользователь переходит к пути /blog
, компонент Category
будет отображаться, когда пользователь переходит к пути, например /blog/tech
, а компонент Post
будет отображаться, когда пользователь переходит к пути, например /blog/tech/react-router
.
Подведение итогов
Это лишь некоторые из основных функций React Router. Доступно множество других функций и параметров, таких как программная навигация, защита маршрута и анализ URL-адресов. Чтобы узнать больше, обязательно ознакомьтесь с документацией React Router.
С этим базовым пониманием того, как работает React Router, вы теперь сможете настроить декларативную маршрутизацию в своих собственных приложениях React. Удачного кодирования!