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

Веб-технологии и программирование
Теория
Автор
принадлежность

Бизюк Андрей

ВГТУ

Дата публикации

3 декабря 2024 г.

Введение в роутинг в React

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

Роутинг позволяет разбить приложение на отдельные компоненты, каждый из которых представляет собой определенную страницу или раздел приложения. Когда пользователь нажимает на ссылку или вводит URL-адрес в адресной строке браузера, роутинг определяет, какой компонент должен быть отображен, и обновляет соответствующую часть страницы.

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

Установка и настройка библиотеки React Router

React Router - это популярная библиотека для реализации роутинга в приложениях React. Для установки React Router необходимо выполнить следующую команду в терминале:

npm install react-router-dom

Затем необходимо импортировать необходимые компоненты в файл приложения. Основными компонентами React Router являются:

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

Пример настройки базового роутинга с использованием этих компонентов:

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Главная</Link>
          </li>
          <li>
            <Link to="/about">О нас</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

В этом примере мы определяем два маршрута: “/” для главной страницы и “/about” для страницы “О нас”. Мы также создаем навигацию, которая содержит ссылки на эти маршруты с помощью компонента . Когда пользователь нажимает на одну из ссылок, React Router сопоставляет текущий URL-адрес с маршрутами и отображает соответствующий компонент.

Создание маршрутов

Для создания маршрутов в React Router используется компонент . Этот компонент принимает несколько пропов, основными из которых являются:

  • path - строка, которая соответствует пути маршрута. Например, “/about” или “/users/:id”.
  • component - компонент, который должен быть отображен при соответствии маршрута.
  • exact - логическое значение, которое указывает, должен ли маршрут точно соответствовать текущему URL-адресу.

Пример создания нескольких маршрутов:

import { Route } from 'react-router-dom';

function App() {
  return (
    <div>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route path="/users/:id" component={UserProfile} />
    </div>
  );
}

В этом примере мы определяем три маршрута: “/” для главной страницы, “/about” для страницы “О нас” и “/users/:id” для страницы профиля пользователя. Маршрут “/users/:id” содержит параметр “:id”, который будет соответствовать любому значению в URL-адресе после “/users/”.

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

Динамические маршруты

Динамические маршруты используются для создания маршрутов, которые содержат динамические сегменты, такие как идентификаторы пользователей или названия статей. Для создания динамических маршрутов в React Router используется синтаксис с двоеточием, например “/users/:id”.

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

Пример создания динамического маршрута:

import { Route } from 'react-router-dom';

function App() {
  return (
    <div>
      <Route path="/users/:id" component={UserProfile} />
    </div>
  );
}

function UserProfile({ match }) {
  const { id } = match.params;
  // загрузка данных пользователя с сервера по id
  // отображение профиля пользователя
}

В этом примере мы определяем динамический маршрут “/users/:id” для профиля пользователя. Когда пользователь переходит по этому маршруту, React Router передает значение :id в компонент UserProfile в качестве пропа match.params.id. Затем мы можем использовать это значение для загрузки данных пользователя с сервера и отображения профиля пользователя.

Вложенные маршруты

Вложенные маршруты используются для создания маршрутов, которые являются частью других маршрутов. Например, у нас может быть маршрут “/users”, который отображает список пользователей, и вложенный маршрут “/users/:id”, который отображает профиль конкретного пользователя.

Для создания вложенных маршрутов в React Router используется компонент

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

Пример создания вложенных маршрутов:

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

function App() {
  return (
    <div>
      <Route path="/users" component={Users} />
    </div>
  );
}

function Users() {
  return (
    <div>
      <h1>Список пользователей</h1>
      <Switch>
        <Route path="/users/:id" component={UserProfile} />
        <Route path="/users" exact component={UserList} />
      </Switch>
    </div>
  );
}

function UserList() {
  // отображение списка пользователей
}

function UserProfile({ match }) {
  const { id } = match.params;
  // загрузка данных пользователя с сервера по id
  // отображение профиля пользователя
}

В этом примере мы определяем родительский маршрут “/users”, который отображает список пользователей, и вложенный маршрут “/users/:id”, который отображает профиль конкретного пользователя. Компонент Users содержит вложенные маршруты, определенные внутри компонента

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

Навигация по программе

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

Другим способом навигации является использование методов истории, таких как history.push и history.replace. Эти методы позволяют программно перейти на новый маршрут без необходимости использовать тег .

Пример навигации с помощью компонента :

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

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Главная</Link>
        </li>
        <li>
          <Link to="/about">О нас</Link>
        </li>
        <li>
          <Link to="/users">Пользователи</Link>
        </li>
      </ul>
    </nav>
  );
}

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

Пример программной навигации с помощью history.push:

import { withRouter } from 'react-router-dom';

function Button({ history }) {
  const handleClick = () => {
    history.push('/about');
  };

  return (
    <button onClick={handleClick}>О нас</button>
  );
}

export default withRouter(Button);

В этом примере мы создаем кнопку, которая программно переходит на маршрут “/about” при нажатии. Для доступа к объекту history мы используем хук withRouter, который предоставляет нам доступ к истории из пропсов компонента.

Защита маршрутов

В некоторых случаях необходимо защитить доступ к определенным маршрутам от неавторизованных пользователей. Например, маршрут “/profile” может быть доступен только авторизованным пользователям.

Для защиты маршрутов в React Router можно использовать компонент PrivateRoute, который проверяет, авторизован ли пользователь, прежде чем разрешить доступ к маршруту.

Пример реализации PrivateRoute:

import { Route, Redirect } from 'react-router-dom';

function PrivateRoute({ component: Component, authenticated, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        authenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: '/login',
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
}

В этом примере мы создаем компонент PrivateRoute, который принимает проп authenticated, указывающий, авторизован ли пользователь. Если пользователь авторизован, компонент рендерит указанный маршрут. Если пользователь не авторизован, компонент перенаправляет пользователя на маршрут “/login”.

Пример использования PrivateRoute:

function App() {
  const authenticated = true; // проверка авторизации пользователя

  return (
    <div>
      <Route path="/login" component={Login} />
      <PrivateRoute path="/profile" authenticated={authenticated} component={Profile} />
    </div>
  );
}

В этом примере мы используем PrivateRoute для защиты маршрута “/profile”. Если пользователь авторизован, он может перейти на этот маршрут. Если пользователь не авторизован, он будет перенаправлен на маршрут “/login”.

Параметры маршрутов

React Router позволяет передавать параметры в маршруты с помощью синтаксиса URL. Например, маршрут “/user/:id” может принимать параметр id, который будет использоваться для отображения информации о конкретном пользователе.

Пример использования параметра в маршруте:

function App() {
  return (
    <div>
      <Route path="/user/:id" component={User} />
    </div>
  );
}

function User({ match }) {
  const { id } = match.params;
  // здесь можно получить информацию о пользователе с id из параметра маршрута
  ...
}

В этом примере мы определяем маршрут “/user/:id” и передаем параметр id в компонент User. В компоненте User мы можем получить значение параметра из объекта match.params и использовать его для отображения информации о пользователе.

Если необходимо передать несколько параметров, их можно разделить с помощью “/”. Например, маршрут “/user/:id/post/:postId”.

Пример использования нескольких параметров в маршруте:

function App() {
  return (
    <div>
      <Route path="/user/:id/post/:postId" component={Post} />
    </div>
  );
}

function Post({ match }) {
  const { id, postId } = match.params;
  // здесь можно получить информацию о посте с postId от пользователя с id из параметров маршрута
  ...
}

В этом примере мы передаем два параметра id и postId в компонент Post и используем их для отображения конкретного поста конкретного пользователя.

Вложенные маршруты

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

Пример использования вложенных маршрутов:

function App() {
  return (
    <div>
      <Route path="/users" component={Users} />
    </div>
  );
}

function Users() {
  return (
    <div>
      <h1>Список пользователей</h1>
      <ul>
        <li><Link to="/users/1">Пользователь 1</Link></li>
        <li><Link to="/users/2">Пользователь 2</Link></li>
        <li><Link to="/users/3">Пользователь 3</Link></li>
      </ul>

      <Route path="/users/:id" component={User} />
    </div>
  );
}

function User({ match }) {
  const { id } = match.params;
  // здесь можно получить информацию о пользователе с id из параметра маршрута
  ...
}

В этом примере мы определяем маршрут “/users” и компонент Users, который отображает список пользователей. Внутри компонента Users мы также определяем вложенный маршрут “/users/:id” и компонент User, который отображает информацию о конкретном пользователе.

Когда пользователь переходит по ссылке на конкретного пользователя, например “/users/1”, React Router сопоставляет этот URL с вложенным маршрутом и отображает компонент User с соответствующим параметром id.

Программная навигация

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

Программная навигация может быть полезна в различных ситуациях, например, при отправке формы или при нажатии на кнопку “Назад” в браузере.

Пример программной навигации:

import { useHistory } from 'react-router-dom';

function AddUser() {
  const history = useHistory();

  const handleSubmit = (event) => {
    event.preventDefault();
    // здесь можно обработать отправку формы
    ...
    // после успешной отправки формы переходим на страницу со списком пользователей
    history.push('/users');
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* здесь могут быть поля формы */}
      <button type="submit">Добавить пользователя</button>
    </form>
  );
}

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

Перенаправление

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

Пример перенаправления:

import { Redirect } from 'react-router-dom';

function ProtectedRoute({ component: Component, ...rest }) {
  const isAuthenticated = // проверяем, авторизован ли пользователь
    localStorage.getItem('isAuthenticated') === 'true';

  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
}

В этом примере мы определяем компонент ProtectedRoute, который проверяет, авторизован ли пользователь. Если пользователь авторизован, компонент отображает указанный маршрут. Если пользователь не авторизован, компонент перенаправляет пользователя на страницу входа с помощью компонента Redirect.

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

404 страница

404 страница - это страница, которая отображается, когда пользователь пытается перейти на несуществующую страницу. React Router позволяет легко добавить 404 страницу в ваше приложение.

Пример добавления 404 страницы:

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

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/users" component={Users} />
      <Route component={NotFound} />
    </Switch>
  );
}

function NotFound() {
  return (
    <div>
      <h1>404 - Страница не найдена</h1>
      <p>К сожалению, страница, которую вы ищете, не существует.</p>
    </div>
  );
}

В этом примере мы добавляем компонент NotFound в конец списка маршрутов в компоненте Switch. Этот компонент будет отображаться, когда ни один из предыдущих маршрутов не соответствует текущему URL. Таким образом, мы обеспечиваем, что при попытке перейти на несуществующую страницу будет отображаться 404 страница.

Взаимодействие с URL-параметрами

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

Пример взаимодействия с параметрами URL:

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

function UserDetails() {
  const { userId } = useParams();

  // здесь можно получить данные о пользователе с id из параметра URL
  const user = getUserById(userId);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      {/* другие данные о пользователе */}
    </div>
  );
}

В этом примере мы используем хук useParams для получения параметра userId из URL. Затем мы можем использовать этот параметр для получения данных о пользователе и отображения их на странице.

Взаимодействие с параметрами URL также может быть полезно при редактировании или удалении данных. Например, вы можете использовать параметр ID для определения, какую запись необходимо отредактировать или удалить.

Взаимодействие с query-параметрами

Query-параметры - это параметры, которые добавляются к URL после символа “?”. React Router предоставляет возможность взаимодействовать с query-параметрами с помощью объекта location.

Пример взаимодействия с query-параметрами:

import { useLocation } from 'react-router-dom';

function Users() {
  const location = useLocation();

  // здесь можно получить query-параметры из объекта location
  const queryParams = new URLSearchParams(location.search);
  const searchTerm = queryParams.get('search');

  // здесь можно использовать query-параметры для фильтрации списка пользователей
  const filteredUsers = searchTerm
    ? users.filter(user => user.name.includes(searchTerm))
    : users;

  return (
    <div>
      {filteredUsers.map(user => (
        <div key={user.id}>
          {user.name}
          {/* другие данные о пользователе */}
        </div>
      ))}
    </div>
  );
}

В этом примере мы используем хук useLocation для получения объекта location, содержащего информацию о текущем URL. Затем мы создаем объект URLSearchParams из свойства search объекта location, чтобы получить доступ к query-параметрам. В данном случае мы получаем значение параметра “search” и используем его для фильтрации списка пользователей.

Взаимодействие с query-параметрами может быть полезно при сортировке, фильтрации или пагинации данных на странице.

Отправка данных при навигации

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

Один из способов - это использование состояния приложения. Вы можете сохранить данные в состоянии приложения перед навигацией на другую страницу, а затем использовать эти данные на целевой странице.

Другой способ - это использование объекта state при программной навигации. Вы можете передать объект state в метод history.push или history.replace, и эти данные будут доступны на целевой странице через объект location.

Пример отправки данных при навигации с помощью объекта state:

import { useHistory } from 'react-router-dom';

function UserList() {
  const history = useHistory();

  const handleClick = (user) => {
    history.push({
      pathname: `/users/${user.id}`,
      state: { user }
    });
  };

  return (
    <div>
      {users.map(user => (
        <button key={user.id} onClick={() => handleClick(user)}>
          {user.name}
        </button>
      ))}
    </div>
  );
}

function UserDetails() {
  const location = useLocation();

  // здесь мы получаем данные о пользователе из объекта state
  const { user } = location.state;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      {/* другие данные о пользователе */}
    </div>
  );
}

В этом примере мы используем хук useHistory для программной навигации на страницу с деталями пользователя. При навигации мы также передаем объект state, содержащий данные о пользователе. На странице с деталями пользователя мы получаем эти данные из объекта location.state.

Наверх