Типизация параметров маршрутов с TypeScript

Примеры типизации параметров маршрутов

1. Добавление динамического маршрута

Для примера мы создадим простой список пользователей, где каждую карточку можно будет кликнуть, чтобы перейти на страницу профиля конкретного пользователя. Маршрут для профиля будет выглядеть следующим образом: /user/:id.

Создаём маршруты:

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

const UsersList = () => (
  <div>
    <h2>Список пользователей</h2>
    <ul>
      <li><a href="/user/1">Пользователь 1</a></li>
      <li><a href="/user/2">Пользователь 2</a></li>
    </ul>
  </div>
);

const UserProfile = () => (
  <div>
    <h2>Страница профиля пользователя</h2>
  </div>
);

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/user/:id" component={UserProfile} />
        <Route path="/" component={UsersList} />
      </Switch>
    </Router>
  );
};

export default App;

Здесь мы указываем динамический параметр :id в маршруте /user/:id. Это позволяет менять URL и отображать различные страницы профиля в зависимости от параметра.

2. Извлечение параметра маршрута через useParams

Чтобы получить параметры из URL, мы используем хук useParams, который предоставляет объект с параметрами текущего маршрута.

Обновим компонент UserProfile:

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

const UserProfile = () => {
  const { id } = useParams();
  return (
    <div>
      <h2>Профиль пользователя</h2>
      <p>ID пользователя: {id}</p>
    </div>
  );
};

Сейчас всё работает, но параметр id никак не типизирован. Это может привести к потенциальным ошибкам.

3. Типизация параметров с TypeScript

Использование TypeScript даёт возможность описать ожидаемую структуру параметров маршрута. Мы создадим интерфейс для описания этих параметров:

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

// Интерфейс для типизации параметров маршрута
interface RouteParams {
  id: string; // Определяем, что параметр `id` должен быть строкой
}

const UserProfile = () => {
  const { id } = useParams<RouteParams>(); // Передаём интерфейс в useParams
  return (
    <div>
      <h2>Профиль пользователя</h2>
      <p>ID пользователя: {id}</p>
    </div>
  );
};

Сейчас TypeScript будет ругаться, если вы попытаетесь обратиться к параметру, который не был описан в интерфейсе.

4. Работа со сложными параметрами

Если ваш маршрут содержит несколько параметров, вы можете расширить интерфейс:

interface RouteParams {
  id: string;
  category: string;
}

// Пример маршрута: /user/:id/:category
const UserProfile = () => {
  const { id, category } = useParams<RouteParams>();
  return (
    <div>
      <h2>Профиль пользователя</h2>
      <p>ID пользователя: {id}</p>
      <p>Категория: {category}</p>
    </div>
  );
};

Теперь вы точно знаете, какие параметры ожидаются, и их типы.

Интеграция с другой логикой

Представьте, что мы работаем с сервером, и нам нужно извлечь данные о пользователе на основании id. Мы можем добавить асинхронный запрос:

Обновим компонент UserProfile:

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

interface RouteParams {
  id: string;
}

interface User {
  id: string;
  name: string;
  email: string;
}

const UserProfile: React.FC = () => {
  const { id } = useParams<RouteParams>();
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    // Имитация API-запроса
    const fetchUser = async () => {
      const response = await fetch(`/api/users/${id}`);
      const data = await response.json();
      setUser(data);
    };
    fetchUser();
  }, [id]);

  if (!user) {
    return <p>Загрузка...</p>;
  }

  return (
    <div>
      <h2>Профиль пользователя</h2>
      <p>ID: {user.id}</p>
      <p>Имя: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
};

export default UserProfile;

Здесь мы добавили типизацию объекта User, чтобы избежать ошибок при извлечении данных и их отображении.

Ошибки и типичные проблемы при типизации маршрутов

Работа с типизацией маршрутов может вызвать несколько распространённых проблем:

1. Миссматч типов. Если в маршруте ожидается id как строка, а сервер возвращает число, это может вызвать ошибки. Преобразуйте типы явно, если это необходимо, например, с помощью String(id).

2. Несоответствие параметров и интерфейса. Если в компоненте вы попытаетесь получить параметр, который не был описан в интерфейсе, TypeScript предупредит вас. Это скорее преимущество, чем недостаток, так как помогает избежать ошибок.

3. Необязательные параметры. Если параметры маршрута не всегда передаются, используйте id?: string в интерфейсе.

1

Задача

Модуль 3: React, 9 уровень, 3 лекция

Недоступна

Создание интерфейса для типизации маршрутов

Создание интерфейса для типизации маршрутов

Открыть

1

Задача

Модуль 3: React, 9 уровень, 3 лекция

Недоступна

Работа с несколькими параметрами маршрута

Работа с несколькими параметрами маршрута

Открыть