Начало работы с React Router

• В этом блоге мы рассмотрим основы React Router и приступим к первым шагам.

Основы

1. React Router — это клиентская библиотека для React и React Native.

2. Она делает возможным переход на разные страницы без необходимости обновления.

3. Поддерживается как декларативная, так и императивная маршрутизация.

Первое использование

Мы будем внедрять маршрутизатор в новый проект и изучать концепции шаг за шагом.

• Установите маршрутизатор с помощью команды$ npm install react-router-dom@6.
• Создайте две страницы, которые будут указывать на два маршрута, которые мы собираемся создать.

const FeedPage = () => {
  return <div>This page shows feeds.</div>;
};
export { FeedPage };

const UserPage = () => {
  return <div>This page shows the details of a user.</div>;
};
export { UserPage };

• Импортируйте BrowserRouter, Routes и Route из «react-router-dom». Оберните весь проект в BrowserRouter. Это необходимо для работы react-router. Вложите Routes внутрь BrowserRouter. Теперь добавьте элемент Route для каждого маршрута, который вы хотите указать.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { FeedPage, UserPage } from "./pages";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="feed" element={<FeedPage />} />
        <Route path="user" element={<UserPage />} />
      </Routes>
    </BrowserRouter>
  </StrictMode>
);

Здесь /feed будет указывать на FeedPage и /user будет указывать на UserPage соответственно.

• Теперь мы видим, что добавление feed или user к корню / в адресной строке переводит нас на соответствующую страницу.

• Вуаля! Мы только что реализовали минимальный react-router.

Навигация с помощью ссылок

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

• Создайте Homepage, куда мы добавим два компонента ссылок для навигации.

<Route path="" element={<HomePage />} />

• Импортируйте и добавьте два компонента Link в HomePage.

import { Link } from "react-router-dom";

const HomePage = () => {
  return (
    <div>
      <div>
        <Link to="feed">Feed</Link>
      </div>
      <div>
        <Link to="user">User</Link>
      </div>
    </div>
  );
};
export { HomePage };

Links похожи на теги якорей, но они не приводят к обновлению страницы. Теперь щелчок по ссылке приводит нас на соответствующую страницу.

Параметры URL

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

• Отредактируйте маршрут user так, чтобы он принимал userId в качестве параметра.

<Route path="user/:userId" element={<UserPage />} />

• Отредактируйте Link в HomePage так.

<Link to={`/user/${123}`}>User</Link>

Здесь 123 — это значение параметра, переданное пользовательскому маршруту.

• Мы можем прочитать переданный параметр из UserPage с помощью хука useParams() следующим образом. Обратите внимание, что имя параметра, которое мы использовали в компоненте Route, будет использоваться для доступа к параметру со страницы UserPage.

Мы читаем переданный параметр следующим образом:

import { useParams } from "react-router-dom";

const UserPage = () => {
  let params = useParams();
  return <div>This page shows the details of user {params.userId}.</div>;
};
export { UserPage };

• Теперь мы видим, что при нажатии на ссылку на домашней странице мы успешно перенаправляемся на заданный идентификатор пользователя.

Маршрут без совпадений

Что делать, если пользователь случайно направляется на маршрут, который не определен? Для этого мы можем добавить Route с ‘*’ в качестве пути внутри нашего Routes. Этот маршрут будет найден, если ни один из путей не совпадает.

• Добавьте маршрут без совпадений следующим образом.

<Route path="*" element={<div>Page not found!</div>}/>

• Теперь при переходе по маршруту, который не определен, мы получим соответствующее сообщение о том, что страница не существует!

Навигация программным способом

До сих пор мы видели только один способ навигации по маршрутам — через <Link>. Что если нам нужно перейти к маршруту после выполнения какого-либо действия, например, нажатия кнопки или перезагрузки страницы? У нас есть хук useNavigate(), который позволяет нам это сделать.

• Давайте добавим кнопку на Домашнюю страницу. При нажатии на эту кнопку мы перейдем на FeedPage.

import { useNavigate } from "react-router-dom";

const HomePage = () => {
  let navigate = useNavigate();
  const buttonClickHandler = () => {
    navigate("feed");
  };
  return (
    <div>
      <button onClick={buttonClickHandler}>Feed Page</button>

• Теперь мы видим, что при нажатии на кнопку мы успешно переходим на страницу Feed.

Демонстрация

Конец

Итак, это было все, что касается введения React Router. Я надеюсь, что оно было дружелюбным для начинающих пользователей React-Router. Пожалуйста, оставляйте свои отзывы или комментарии.

Хорошего дня!