React Router v6: навигация в современных приложениях

1npm install react-router-dom

1import { BrowserRouter, Routes, Route } from 'react-router-dom';
2
3function App() {
4  return (
5    <BrowserRouter>
6      <Routes>
7        <Route path="/" element={<Home />} />
8        <Route path="/about" element={<About />} />
9      </Routes>
10    </BrowserRouter>
11  );
12}

1<Route path="/users/:userId" element={<UserProfile />} />
2
3// Доступ к параметрам
4function UserProfile() {
5  const { userId } = useParams();
6  return <div>User: {userId}</div>;
7}

1<Route path="/docs/*" element={<Documentation />} />
2
3// Внутри Documentation
4function Documentation() {
5  const { '*': path } = useParams();
6  return <div>Текущий раздел: {path}</div>;
7}

1<Route path="/dashboard" element={<DashboardLayout />}>
2  <Route index element={<DashboardHome />} />
3  <Route path="settings" element={<Settings />} />
4  <Route path="profile" element={<Profile />} />
5</Route>

1function DashboardLayout() {
2  return (
3    <div>
4      <Sidebar />
5      <main>
6        <Outlet />
7      </main>
8    </div>
9  );
10}

1import { Link, NavLink } from 'react-router-dom';
2
3function Navigation() {
4  return (
5    <nav>
6      <Link to="/">Главная</Link>
7      <NavLink
8        to="/about"
9        className={({ isActive }) =>
10          isActive ? 'active' : 'inactive'
11        }
12      >
13        О нас
14      </NavLink>
15    </nav>
16  );
17}

1import { useNavigate } from 'react-router-dom';
2
3function LoginPage() {
4  const navigate = useNavigate();
5
6  const handleLogin = async () => {
7    await login();
8    navigate('/dashboard');
9  };
10
11  return <button onClick={handleLogin}>Войти</button>;
12}

1function RequireAuth({ children }) {
2  const { isAuthenticated } = useAuth();
3  const location = useLocation();
4
5  if (!isAuthenticated) {
6    return <Navigate to="/login" state={{ from: location }} />;
7  }
8
9  return children;
10}
11
12// Использование
13<Route
14  path="/dashboard"
15  element={
16    <RequireAuth>
17      <Dashboard />
18    </RequireAuth>
19  }
20/>

1const Dashboard = lazy(() => import('./Dashboard'));
2
3<Route
4  path="/dashboard"
5  element={
6    <Suspense fallback={<Spinner />}>
7      <Dashboard />
8    </Suspense>
9  }
10/>

1import { ErrorBoundary } from 'react-error-boundary';
2
3function RouteErrorBoundary() {
4  return (
5    <ErrorBoundary
6      fallbackRender={({ error, resetErrorBoundary }) => (
7        <div>
8          <h1>Ошибка</h1>
9          <p>{error.message}</p>
10          <button onClick={resetErrorBoundary}>Попробовать снова</button>
11        </div>
12      )}
13    >
14      <Outlet />
15    </ErrorBoundary>
16  );
17}

1<Route
2  path="/users/:userId"
3  element={<UserProfile />}
4  errorElement={<UserError />}
5/>

1// Все маршруты с префиксом /api
2const apiRoutes = [
3  { path: '/users', element: <Users /> },
4  { path: '/posts', element: <Posts /> },
5];
6
7<Route path="/api" element={<ApiLayout />}>
8  {apiRoutes.map(route => (
9    <Route key={route.path} {...route} />
10  ))}
11</Route>

1function useQueryParams() {
2  const [searchParams, setSearchParams] = useSearchParams();
3
4  const getParam = (key) => searchParams.get(key);
5
6  const setParam = (key, value) => {
7    setSearchParams(prev => {
8      prev.set(key, value);
9      return prev;
10    });
11  };
12
13  return { getParam, setParam };
14}