React Router – это библиотека для маршрутизации в приложениях, созданных с использованием React. Она предоставляет мощные инструменты для определения и управления маршрутов в вашем приложении, что позволяет создавать многостраничные веб-приложения с навигацией без перезагрузки страницы. Что может библиотека:
React Router является мощным инструментом для организации маршрутизации в веб-приложениях на React, обеспечивает гибкую и интуитивно понятную навигацию для пользователей. В тексте этой статьи мы расскажем про саму маршрутизацию подробнее.
Содержание
Декларативная маршрутизация в React и React Router – это подход к определению маршрутов в веб-приложениях, который основан на объявлении маршрутов с использованием декларативного синтаксиса, вместо императивного управления навигацией.
В декларативной маршрутизации вы определяете маршруты как часть компонентов React, используя специальные компоненты или хуки React Router. Эти компоненты предоставляют простой и интуитивно понятный способ определения того, какие компоненты должны отображаться при определенных URL-адресах.
Например, в React Router для определения маршрутов вы можете использовать компоненты Route, которые определяют соответствие между URL-адресом и компонентом для отображения:
import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’;
function App() {
return (
<Router>
<Switch>
<Route path=»/about»>
<About />
</Route>
<Route path=»/contact»>
<Contact />
</Route>
<Route path=»/»>
<Home />
</Route>
</Switch>
</Router>
);
}
Здесь каждый Route определяет, какой компонент отображается при соответствующем URL-адресе. Например, когда URL-адрес соответствует «/about», отображается компонент About.
Декларативная маршрутизация делает код (code) более читаемым и поддерживаемым, поскольку позволяет определять маршруты прямо внутри компонентов, связанных с их функциональностью. Она также облегчает работу с динамическими маршрутами и параметрами URL, так как вы можете использовать динамические значения в пути маршрута, например, «/users/:id».
Подготовка окружения с использованием 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.
Кроме того, важно использовать компонент 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:
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 является частью 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>
);
}
Хук 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 } });
}
Хуки useParams и useRoutes также являются частью библиотеки React Router и используются для работы с параметрами маршрута и динамической маршрутизацией соответственно.
Хук useParams предоставляет доступ к параметрам маршрута в вашем компоненте. Это особенно полезно, когда вам нужно получить значения переменных маршрута из URL-адреса.
import { useParams } from ‘react-router-dom’;
function UserProfile() {
const { userId } = useParams();
return (
<div>
<h2>Профиль пользователя № {userId}</h2>
</div>
);
}
В этом примере мы получаем параметр userId из URL-адреса и используем его для динамического отображения профиля пользователя. Параметры маршрута должны быть определены в маршруте, который использует этот компонент.
Хук 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 для определения маршрутов и навигации между страницами.
При необходимости вы можете передавать параметры через URL, использовать вложенные маршруты, доступ к объекту history для программной навигации и многое другое. Реактивные хуки, такие как useParams и useHistory, также могут быть использованы для управления маршрутами и доступа к данным.
Оставьте заявку и наш менеджер свяжется с Вами в течение 15 минут