Маршрутизация важна в любом фронтенд-проекте, предыдущие версии React Router сыграли свою роль в упрощении настройки маршрутизации для разработчиков React и React Native.
В этой статье мы сосредоточимся на react-router-dom, который является пакетом, используемым для настройки маршрутизации в большинстве веб-приложений React.
В этой статье мы рассмотрим, как выполнять маршрутизацию в предыдущих версиях React Router, а затем познакомимся с последней версией — React Router версии 6.
Эта статья предназначена для разработчиков, которые хотят узнать, как перенести свои приложения React Apps с предыдущих версий React Router на React Router v6. Если вы новичок в React Router, эта статья также для вас. Я расскажу вам, как использовать React Router и его последние возможности в ваших проектах React.
Необходимые условия
Чтобы следовать этому руководству, вам понадобится следующее:
- Текстовый редактор
- Node.js, установленный локально на вашей машине
- Рабочие знания HTML, CSS и JavaScript
- Знание React
Краткое описание React Router версии 5 (v5)
В React Router v5 мы объявляем все наши маршруты в корневом компоненте App, а компонент BrowserRouter оборачивает все приложение.
//./index.js
<BrowserRouter>
<App />
</BrowserRouter>
//./App.js
const App = () => {
return (
<div className="App">
<nav>
<Link to="/">Home Page</Link>
<Link to="/about">About Page</Link>
<Link to="/product">Product Page</Link>
<Link to="/contact">Contact Page</Link>
</nav>
<Switch>
<Route></Route>
</Switch>
</div>
);
};
export default App;
Вот как мы настраиваем типичное React-приложение при использовании React Router v5 или старше.
В компоненте App у нас есть раздел nav, раздел nav содержит компонент Link, предоставляемый React Router, который помогает нам переходить на различные страницы приложения.
После раздела nav у нас есть компонент Switch, который оборачивает все маршруты в приложении.
Компонент Switch, по сути, оборачивает все маршруты в приложении и гарантирует, что только один маршрут может быть активен в одно время.
В компоненте Switch регистрируются все отдельные маршруты и компоненты страницы.
<Switch>
<Route exact to="/">
<Home />
</Route>
</Switch>
Здесь мы указываем путь в компоненте Route, а компонент страницы, который мы хотим отобразить для этого пути, также вложен в компонент Route.
<Switch>
<Route exact to="/" component={<Home />} />
</Switch>
Мы также можем использовать component prop для компонента Route вместо вложения, чтобы указать, какой компонент должен быть отображен для определенного пути.
Если вы новичок в React Router, то теперь вы должны иметь представление о том, как он работает. Если вы уже знаете, как он работает, давайте погрузимся в React Router версии 6.
Переход к React Router версии 6 (v6)
Начало работы
Откройте терминал и создайте новый проект React, выполнив следующую команду:
> npx create-react-app ReactRouterv6Demo
> cd ReactRouterv6Demo
Затем установите React Router в качестве зависимости в приложении React:
> npm install react-router-dom@6
Эта команда установит последнюю версию react-router-dom, это версия 6.
После установки зависимости React router нам нужно будет добавить некоторый код в файл src/index.js.
// React Router v6
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
Мы импортируем компонент BrowserRouter из react-router-dom, затем обернем компонент App компонентом BrowserRouter, теперь мы настроены на использование компонентов и хуков React Router в нашем приложении.
Конфигурация маршрутов в React Router v6
В предыдущих версиях React Router компонент Switch оборачивал отдельные компоненты Route в приложении.
В React Router v6 отдельные Route помещаются в компонент Routes.
// React Router v6
<Routes>
<Route />
<Route />
</Routes>
Компонент Routes заменяет компонент Switch в React Router v6.
// React Router v6
// ./ App.jsx
import { Routes, Route } from "react-router-dom";
import About from "./components/About";
import Home from "./components/Home";
const App = () => {
return (
<div className="App">
<h1>React Router</h1>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</div>
);
};
export default App;
Еще одним изменением в React Router v6 является то, как мы регистрируем компонент страницы, который мы хотим отобразить при переходе по определенному пути.
Здесь мы не вкладываем компонент, вместо этого мы используем element prop, предоставляемый React Router v6, этот element prop устанавливается на компонент страницы, который мы хотим отобразить.
Кроме того, в React Router v6 нам не нужно ключевое слово exact, потому что по умолчанию компонент Route в v6 будет точно соответствовать каждому определенному пути.
Как настроить страницу 404
В предыдущих версиях React Router мы настраивали маршрутизацию для страницы 404 следующим образом;
<Route>
<NotFound />
<Route/>
Компонент NotFound — это компонент страницы, который мы хотим отобразить, когда пользователь заходит на несуществующую страницу, также мы не указываем здесь путь.
Далее рассмотрим, как настроить страницу 404 в v6.
Сначала создайте компонент NotFound в папке компонентов.
//./component/NotFound.js
import React from "react";
const NotFound = () => {
return (
<div>
<h1>404 Page</h1>
<p>The page you are trying to access does not exist</p>
</div>
);
};
export default NotFound;
Далее мы настроим маршрут 404 страницы
<Route path="*" element={<NotFound />} />
Вот как мы настроим 404page Route в React Router v6, у нас есть путь для всех маршрутов, который называется "*", этот путь, который мы указали, отлавливает всех, кто пытается получить доступ к несуществующей странице, и отображает 404page.
Когда вы заходите на несуществующий маршрут, вы должны увидеть страницу 404, похожую на эту.
Написание inline jsx-шаблонов в компоненте Route
В React Router v6 мы можем встраивать некоторые JSX-шаблоны в реквизит element вместо создания компонента страницы.
<Route
path="/test"
element={
<div>
<h2>Test Page</h2>
<p>Hello test page</p>
</div>
}
/>
Страница, подобная этой, отображается в браузере, когда мы входим на сайт /test.
Перенаправления
Далее мы рассмотрим, как мы делаем перенаправления для определенных маршрутов и как мы можем программно перенаправлять пользователей.
В предыдущих версиях React Router для выполнения перенаправления мы использовали компонент Redirect.
В v6 компонент Redirect не существует, вместо него мы используем новый компонент из React Router v6 — компонент Navigate.
<Route path="/redirect" element={<Navigate to="/about" />} />
Когда пользователь заходит на сайт /redirect, он перенаправляется на страницу About.
Программные перенаправления
Для программного перенаправления пользователей в предыдущих версиях React Router мы использовали хук useHistory.
import {useHistory} from "react-router-dom"
const history = useHistory()
<button onClick={() => history.push("/products")} >Click me</button>
В React Router v6 хук useHistory заменен на хук useNavigate, хук useNavigate работает точно так же, как и хук useHistory
import {useNavigate} from "react-router-dom"
const navigate = useNavigate()
<button onClick={() => navigate("/products")} >Click me</button>
Разница между использованием хука useHistory и хука useNavigate заключается в том, что нам не нужно вызывать метод push на хуке useNavigate для перенаправления пользователя.
Вложенные маршруты
В предыдущих версиях React Router вложенные маршруты выглядели следующим образом.
<Route path="/about/offers>
<Offers />
</Route>
В React Router v6 вложенные маршруты изменились.
Сначала мы импортируем компоненты Routes и Route.
// ./Product.jsx
import { Routes, Route } from "react-router-dom";
import Offers from "./Offers";
<Routes>
<Route path="/offers" element={<Offers />} />
</Routes>;
Здесь, в React Router v6, компонент Route будет вложен внутрь компонента Routes, мы используем элемент prop для установки компонента страницы, который мы хотим отобразить, в отличие от предыдущих версий, где мы только вкладывали компонент страницы внутрь компонента Route.
Еще одно изменение в том, как мы делаем вложенные маршруты в v6 — это способ установки пути, вместо того, чтобы записывать родительский путь вместе с вложенным путем, здесь путь вложенных маршрутов становится относительным к родительскому пути.
Путь предложения просто прикрепляется к концу родительского пути (страница продукта).
Далее, в файле App.jsx, где у нас находятся все маршруты приложения, мы должны внести некоторые изменения в компонент Route, который ссылается на страницу продукта Product.
<Route path="/product" element={<Product />} />
Этот компонент Product Route в настоящее время настроен на точное соответствие пути к продукту, все, что находится после "/product" игнорируется, что означает, что вложенные пути предложений будут проигнорированы.
Чтобы избежать этого, мы добавляем "/*" к пути продукта.
<Route path="/product/*" element={<Product />} />
"/*" означает соответствие любому слогу или пути, который идет после пути продукта.
Заключение
Если вы дочитали эту статью до конца, то теперь у вас должны быть хорошие базовые знания о React Router v6 и вы можете использовать его в своих проектах React.
На этом статья закончена, есть еще много интересного о React Router, чего мы не коснулись в этой статье.
Вы можете ознакомиться с некоторыми из следующих ресурсов, чтобы узнать больше о React Router v6 👇:
-
Документация по React Router
-
Руководство по React Router
Ознакомьтесь с этими ресурсами.
Как всегда, спасибо, что прочитали статью, поставьте лайк 👍, поделитесь ею с другими, а если у вас остались вопросы, задавайте их в комментариях. СПАСИБО, ЧТО ЧИТАЕТЕ! 💖
Если вам понравилось читать эту статью так же, как мне понравилось ее писать, то ставьте лайк и делитесь ею со своими друзьями и не стесняйтесь следовать за мной в Twitter 👨💻.
