Обновление Switch на Routes

В последних версиях React Router (начиная с версии 6) произошло важное изменение: компонент Switch был заменён на Routes. Это изменение повлияло на способ маршрутизации, определения путей и работы с вложенными маршрутами.

Основные отличия Routes от Switch

  1. Поддержка вложенных маршрутов Routes позволяет создавать вложенные маршруты без использования дополнительных вспомогательных компонентов. Каждый дочерний автоматически рендерится относительно родительского пути.

  2. Явное указание element вместо component В React Router v6 больше не используется свойство component или render. Теперь для рендеринга компонентов необходимо использовать свойство element, в котором передается JSX-компонент:

    import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    
      } />
      } />
    
  );
}

  3. Нет необходимости в exact В версии 6 Route всегда работает как точное совпадение пути, поэтому свойство exact больше не требуется. Путь / не будет совпадать с /about, если указан явно.

  4. Вложенные маршруты с Outlet Для рендеринга дочерних маршрутов используется компонент Outlet. Он служит местом для отображения всех вложенных :

    import { Routes, Route, Outlet } from "react-router-dom";

function Dashboard() {
  return (
    
    
      
    Dashboard
    
      
    
    
  );
}

function Analytics() {
  return 
    Analytics
    ;
}

function App() {
  return (
    
      }>
        } />
      
    
  );
}

    Здесь Analytics рендерится внутри Dashboard на пути /dashboard/analytics.

  5. Навигация с использованием useNavigate Для программного перехода между маршрутами теперь используется хук useNavigate вместо устаревшего history.push:

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

function LoginButton() {
  const navigate = useNavigate();

  function handleLogin() {
    // выполнение логики авторизации
    navigate("/dashboard");
  }

  return ;
}

  6. Поддержка wildcard и 404 страниц Для обработки всех неопределённых маршрутов используется символ * в пути:

    function NotFound() {
  return 
    Страница не найдена
    ;
}


  } />
  } />

  7. Маршруты с динамическими параметрами Параметры в маршрутах определяются с помощью двоеточия : и доступны через хук useParams:

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

function UserProfile() {
  const { userId } = useParams();
  return 
    Профиль пользователя: {userId}
    ;
}


  } />

  8. Условные маршруты Условная отрисовка маршрутов стала проще: можно использовать обычные JavaScript-выражения для включения или исключения :

    const isAdmin = true;


  } />
  {isAdmin && } />}

Миграция со старого Switch

  • Все должны быть вложены в .
  • component заменяется на element.
  • exact больше не нужен.
  • Для вложенных маршрутов необходимо использовать .
  • Программная навигация через useNavigate вместо history.push или useHistory.

Пример комплексного использования

import { Routes, Route, Outlet, useNavigate, useParams } from "react-router-dom";

function App() {
  return (
    
      } />
      }>
        } />
        } />
      
      } />
      } />
    
  );
}

function Dashboard() {
  return (
    

      
Dashboard

      
    

  );
}

function UserProfile() {
  const { id } = useParams();
  return 
Профиль пользователя: {id}
;
}

function NotFound() {
  return 
Страница не найдена
;
}

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

Оглавление