Как настроить маршрутизацию в React?react-27

npm install react-router-dom
# или
yarn add react-router-dom

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/contact" element={<ContactPage />} />
      </Routes>
    </BrowserRouter>
  );
}

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

function NavBar() {
  return (
    <nav>
      <Link to="/">Главная</Link>
      <Link to="/about">О нас</Link>
      <Link to="/contact">Контакты</Link>
    </nav>
  );
}

<Route path="/users/:id" element={<UserProfile />} />

// В компоненте UserProfile:
import { useParams } from 'react-router-dom';

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

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="stats" element={<Stats />} />
  <Route path="settings" element={<Settings />} />
</Route>

// В компоненте Dashboard:
import { Outlet } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <h1>Панель управления</h1>
      <Outlet /> {/* Здесь будут рендериться вложенные маршруты */}
    </div>
  );
}

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

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

  const handleLogin = () => {
    // Логика авторизации...
    navigate('/dashboard');
  };

  return <button onClick={handleLogin}>Войти</button>;
}

<Route path="*" element={<NotFoundPage />} />

function PrivateRoute({ children }) {
  const isAuthenticated = checkAuth(); // Ваша функция проверки авторизации
  return isAuthenticated ? children : <Navigate to="/login" />;
}

// Использование:
<Route
  path="/admin"
  element={
    <PrivateRoute>
      <AdminPanel />
    </PrivateRoute>
  }
/>

const AboutPage = React.lazy(() => import('./AboutPage'));

<Route
  path="/about"
  element={
    <React.Suspense fallback={<Loader />}>
      <AboutPage />
    </React.Suspense>
  }
/>