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

Настройка React Router v6:
Для начала давайте установим React Router v6 и настроим базовую структуру маршрутизации в нашем приложении. В терминале выполните следующую команду:

npm install react-router@next react-router-dom@next

Теперь давайте создадим файл с именем App.tsxи импортируем необходимые зависимости:

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

Далее определите свои маршруты с помощью компонента Routes:

function App() {
  return (
    <Router>
      <Routes>
        {/* Define your public routes here */}
        <Route path="/" element={<Home />} />
        {/* Define your private routes here */}
        <Route path="/dashboard" element={<Dashboard />} />
        {/* Add a catch-all route for 404 errors */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

Метод 1. Подход с компонентами более высокого порядка (HOC).
Один из способов реализации частных маршрутов — использование компонентов более высокого порядка (HOC). Мы можем создать компонент AuthRoute, который обертывает наши частные маршруты и проверяет, аутентифицирован ли пользователь, перед отрисовкой компонента. Вот пример:

import { Navigate, Route } from 'react-router-dom';
function AuthRoute({ element, ...props }) {
  // Check if user is authenticated
  const isAuthenticated = /* Your authentication logic here */;
  // Render the component if authenticated, otherwise redirect to login
  return isAuthenticated ? (
    <Route {...props} element={element} />
  ) : (
    <Navigate to="/login" replace />
  );
}

Теперь мы можем использовать компонент AuthRouteдля защиты наших частных маршрутов:

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <AuthRoute path="/dashboard" element={<Dashboard />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

Метод 2: подход к рендерингу:
Другой подход — использовать шаблон рендеринга, предоставленный React Router. Мы можем определить компонент PrivateRoute, который принимает свойство renderи условно отображает компонент в зависимости от статуса аутентификации. Вот пример:

import { Navigate, Route } from 'react-router-dom';
function PrivateRoute({ render: RenderComponent, ...props }) {
  // Check if user is authenticated
  const isAuthenticated = /* Your authentication logic here */;
  // Render the component if authenticated, otherwise redirect to login
  return (
    <Route
      {...props}
      element={
        isAuthenticated ? (
          <RenderComponent />
        ) : (
          <Navigate to="/login" replace />
        )
      }
    />
  );
}

Мы можем использовать компонент PrivateRouteдля защиты наших частных маршрутов:

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <PrivateRoute path="/dashboard" render={Dashboard} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

В этой статье мы рассмотрели два метода реализации частных маршрутов в React Router v6 с помощью TypeScript. Подход компонента более высокого порядка (HOC) и подход render prop обеспечивают способы защиты маршрутов и гарантируют, что только прошедшие проверку подлинности пользователи смогут получить доступ к определенным частям вашего приложения. Используя эти методы, вы можете создавать безопасные и удобные для пользователя приложения с помощью React Router v6 и TypeScript.