Маршрутизация в React Router

Подготовка окружения

Подготовка окружения с использованием react-router-dom обеспечивает основу для создания маршрутизированных веб-приложений на React. React Router DOM – это пакет, который предоставляет набор компонентов для маршрутизации в веб-приложениях на React.

Сначала создадим проект с помощью Create React App. Далее – установка react-router-dom. Вы можете выполнить это с помощью npm или yarn:

npm install react-router-dom

или

yarn add react-router-dom

Затем вы должны настроить маршрутизацию в своем приложении. Обычно это делается в корневом компоненте вашего приложения. Вы можете использовать компоненты BrowserRouter, HashRouter или MemoryRouter для обертывания вашего приложения. Например:

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import { BrowserRouter as Router } from ‘react-router-dom’;

import App from ‘./App’;

ReactDOM.render(

<Router>

<App />

</Router>,

document.getElementById(‘root’)

);

Далее определите маршруты внутри вашего приложения с помощью компонента Route. Эти маршруты указывают, какие компоненты должны отображаться для определенных URL-адресов.

import React from ‘react’;

import { Route, Switch } from ‘react-router-dom’;

import Home from ‘./Home’;

import About from ‘./About’;

import Contact from ‘./Contact’;

function App() {

return (

<Switch>

<Route path=»/about»>

<About />

</Route>

<Route path=»/contact»>

<Contact />

</Route>

<Route path=»/»>

<Home />

</Route>

</Switch>

);

}

export default App;

Для навигации между маршрутами вы можете использовать компонент Link или его варианты, такие как NavLink. Они создают ссылки, которые позволяют пользователям переходить между различными маршрутами без перезагрузки страницы.

import React from ‘react’;

import { Link } from ‘react-router-dom’;

function Navigation() {

return (

<nav>

<ul>

<li>

<Link to=»/»>Home</Link>

</li>

<li>

<Link to=»/about»>About</Link>

</li>

<li>

<Link to=»/contact»>Contact</Link>

</li>

</ul>

</nav>

);

}

export default Navigation;

После этого вы можете дополнительно настраивать ваше приложение, добавлять защиту маршрутов, передавать параметры и многое другое в соответствии с требованиями вашего проекта.

Настройка маршрутов

Настройка маршрутов в React Router довольно проста и осуществляется с использованием компонента Route. Этот компонент определяет соответствие между URL-адресом и компонентом, который должен отображаться при совпадении.

Приведем пример настройки маршрутов с помощью React Router:

import React from ‘react’;

import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’;

import Home from ‘./Home’;

import About from ‘./About’;

import Contact from ‘./Contact’;

import NotFound from ‘./NotFound’;

function App() {

return (

<Router>

<div>

<Switch>

{/* Для каждого маршрута используйте компонент Route */}

{/* Перечислите маршруты в порядке их приоритета */}

<Route exact path=»/»>

<Home />

</Route>

<Route path=»/about»>

<About />

</Route>

<Route path=»/contact»>

<Contact />

</Route>

{/* Маршрут 404: страница «не найдено» */}

<Route path=»*»>

<NotFound />

</Route>

</Switch>

</div>

</Router>

);

}

export default App;

Обратите внимание на ключевую часть – компоненты <Route>. У каждого компонента Route есть два важных атрибута: path и component.

• Path – это строка, определяющая шаблон URL-адреса, с которым должен соответствовать маршрут.
• Component – это компонент React, который будет отображаться, когда URL-адрес соответствует указанному пути.

Кроме того, важно использовать компонент Switch. Он гарантирует, что только один из маршрутов внутри него будет соответствовать текущему URL-адресу. Это полезно, когда есть маршруты, которые могут быть частично совпадающими.

В приведенном выше примере маршрут «/» имеет атрибут exact, что означает точное совпадение. Без этого атрибута маршрут «/» также был бы считаем активным для других URL, таких как «/about», что могло бы вызвать проблемы с отображением.

Также если вы хотите, чтобы ваше приложение использовало хэш-маршрутизацию (например, example.com/#/about), вы можете использовать HashRouter вместо BrowserRouter:

import { HashRouter as Router, Route, Switch } from ‘react-router-dom’;

Вы можете дополнительно настраивать маршруты, используя параметры, передавая компонентам дополнительные данные и многое другое в зависимости от требований вашего приложения.

Как настроить вложенные маршруты в React Router v6

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

Приведем пример настройки вложенных маршрутов в React Router v6:

import { BrowserRouter as Router, Routes, Route, Link } from ‘react-router-dom’;

function App() {

return (

<Router>

<div>

<nav>

<ul>

<li>

<Link to=»/»>Home</Link>

</li>

<li>

<Link to=»/about»>About</Link>

</li>

<li>

<Link to=»/dashboard»>Dashboard</Link>

</li>

</ul>

</nav>

<Routes>

<Route path=»/» element={<Home />} />

<Route path=»/about» element={<About />} />

{/* Вложенные маршруты для Dashboard */}

<Route path=»/dashboard» element={<Dashboard />}>

<Route path=»/» element={<DashboardHome />} />

<Route path=»profile» element={<DashboardProfile />} />

<Route path=»settings» element={<DashboardSettings />} />

</Route>

</Routes>

</div>

</Router>

);

}

function Home() {

return <h2>Home</h2>;

}

function About() {

return <h2>About</h2>;

}

function Dashboard() {

return (

<div>

<h2>Dashboard</h2>

{/* Отображение вложенных маршрутов */}

<Routes>

<Route path=»/» element={<DashboardHome />} />

<Route path=»profile» element={<DashboardProfile />} />

<Route path=»settings» element={<DashboardSettings />} />

</Routes>

</div>

);

}

function DashboardHome() {

return <h3>Dashboard Home</h3>;

}

function DashboardProfile() {

return <h3>Dashboard Profile</h3>;

}

function DashboardSettings() {

return <h3>Dashboard Settings</h3>;

}

export default App;

Обратите внимание на использование компонента Routes вместо Switch. В React Router v6 Routes является заменой Switch, и он автоматически выбирает только один маршрут, который соответствует текущему URL. Кроме того, в этом примере вложенные маршруты определены внутри компонента Dashboard, что позволяет легко организовать вложенные маршруты.

Хук useLocation

Хук useLocation является частью React Router и предоставляет доступ (access) к текущему URL-адресу в вашем компоненте React. Он полезен, когда вам нужно получить информацию (content) о текущем пути и параметрах URL для выполнения динамических действий или рендеринга в вашем приложении (application).

Как использовать хук useLocation:

import { useLocation } from ‘react-router-dom’;

function MyComponent() {

const location = useLocation();

console.log(location);

return (

<div>

Текущий путь: {location.pathname}

</div>

);

}

Здесь useLocation возвращает объект location, который содержит информацию о текущем URL-адресе. Свойство pathname объекта location содержит текущий путь (часть URL-адреса после основного домена).

Помимо pathname, объект location также содержит другие свойства, такие как search (параметры запроса в строковом формате), hash (хэш-часть URL) и state (дополнительное состояние, которое может быть передано с помощью метода history.push).

Приведем пример (example) использования других свойств location:

function MyComponent() {

const location = useLocation();

console.log(location);

return (

<div>

Текущий путь: {location.pathname}

<br />

Параметры запроса: {location.search}

<br />

Хэш: {location.hash}

</div>

);

}

Хук useLocation отлично подходит для создания динамических интерфейсов, основанных на текущем URL-адресе, а также для выполнения различных условий и рендеринга в зависимости от пути или параметров запроса.

Хук useNavigate

Хук useNavigate является частью библиотеки React Router и используется для программного перехода между маршрутами в вашем приложении React без необходимости использования ссылок или иных элементов управления навигацией.

Как использовать хук useNavigate:

import { useNavigate } from ‘react-router-dom’;

function MyComponent() {

const navigate = useNavigate();

function handleClick() {

// Программный переход на другой маршрут

navigate(‘/another-route’);

}

return (

<div>

<button onClick={handleClick}>Перейти на другой маршрут</button>

</div>

);

}

Здесь useNavigate возвращает функцию navigate, которую вы можете вызвать для перехода на другой маршрут. Это позволяет вам осуществлять программное управление навигацией в вашем приложении на React.

Как и при использовании компонента Link, useNavigate позволяет вам передавать дополнительные параметры в URL-адрес, например, для динамической маршрутизации:

function handleClick() {

// Программный переход на другой маршрут с динамическими параметрами

navigate(‘/user/123’, { state: { fromDashboard: true } });

}

Кроме того, хук useNavigate особенно полезен в контексте обработки форм, диалоговых окон или других сценариев, где требуется перенаправление пользователя после определенных действий. Помните, что хук useNavigate доступен только в компонентах, которые являются потомками компонента Routes в React Router v6.

Другие хуки

Хуки useParams и useRoutes также являются частью библиотеки React Router и используются для работы с параметрами маршрута и динамической маршрутизацией соответственно.

useParams

Хук useParams предоставляет доступ к параметрам маршрута в вашем компоненте. Это особенно полезно, когда вам нужно получить значения переменных маршрута из URL-адреса.

import { useParams } from ‘react-router-dom’;

function UserProfile() {

const { userId } = useParams();

return (

<div>

<h2>Профиль пользователя № {userId}</h2>

</div>

);

}

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

useRoutes

Хук useRoutes используется для динамической маршрутизации в приложении на React. Он позволяет определить набор маршрутов и их компоненты в зависимости от текущего URL-адреса.

import { useRoutes } from ‘react-router-dom’;

function App() {

const routeResult = useRoutes(routes);

return routeResult;

}

const routes = [

{

path: ‘/’,

element: <Home />,

children: [

{ path: ‘about’, element: <About /> },

{ path: ‘contact’, element: <Contact /> },

],

},

{ path: ‘login’, element: <Login /> },

{ path: ‘*’, element: <NotFound /> },

];

Здесь мы используем useRoutes для определения динамических маршрутов в зависимости от текущего URL-адреса. Маршруты определены в виде массива объектов, каждый из которых содержит путь и соответствующий элемент для рендеринга. Кроме того, вы можете использовать вложенные маршруты, как показано в примере с маршрутами / и его дочерними маршрутами /about и /contact.

Заключение

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

Для начала работы с React Router вам потребуется установить библиотеку react-router-dom с помощью npm:

npm install react-router-dom

После этого вы сможете импортировать необходимые компоненты и функции для настройки маршрутов в вашем приложении JavaScript. Вот так выглядит базовая настройка маршрутизации:

import React from ‘react’;

import { BrowserRouter as Router, Route, Switch, Link } from ‘react-router-dom’;

const App = () => {

return (

<Router>

<div>

<nav>

<ul>

<li>

<Link to=»/»>Home</Link>

</li>

<li>

<Link to=»/about»>About</Link>

</li>

</ul>

</nav>

<Switch>

<Route path=»/about»>

<About />

</Route>

<Route path=»/»>

<Home />

</Route>

</Switch>

</div>

</Router>

);

};

const Home = () => <h1>Home Page</h1>;

const About = () => <h1>About Page</h1>;

export default App;

Здесь мы создали базовое приложение React с двумя страницами: «Home» и «About». Мы использовали компоненты BrowserRouter, Route, Switch и Link из библиотеки react-router-dom для определения маршрутов и навигации между страницами.

• BrowserRouter обертывает все маршруты и обеспечивает навигацию в вашем приложении.
• Route определяет соответствие маршрута и отображает соответствующий компонент при совпадении URL.
• Switch используется для обеспечения рендеринга только одного маршрута одновременно.
• Link предоставляет ссылку для перехода между страницами без перезагрузки страницы.

При необходимости вы можете передавать параметры через URL, использовать вложенные маршруты, доступ к объекту history для программной навигации и многое другое. Реактивные хуки, такие как useParams и useHistory, также могут быть использованы для управления маршрутами и доступа к данным.

Маршрутизация в React с помощью React Router делает ваше приложение более управляемым, организованным и понятным для пользователя, что делает его необходимым инструментом для разработки современных веб-приложений. Отметим, что в нашем блоге вы можете также подробно узнать про Python, HTML, GET, CSS и многое другое.