当前位置：首页 > React

在react中如何设置路由

2026-03-11 13:12:41React

安装 React Router

在项目中安装 React Router 库，使用 npm 或 yarn 进行安装。React Router 的最新版本是 v6，推荐使用该版本。

npm install react-router-dom

或

yarn add react-router-dom

配置基本路由

在项目的入口文件（通常是 App.js 或 index.js）中引入必要的组件并配置路由。使用 BrowserRouter 作为路由容器，Routes 和 Route 组件定义路由规则。

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

使用动态路由

动态路由允许在 URL 中传递参数，例如用户 ID 或文章标题。使用冒号（:）定义动态参数，通过 useParams 钩子获取参数值。

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

function UserProfile() {
  const { userId } = useParams();
  return <div>User ID: {userId}</div>;
}

function App() {
  return (
    <Routes>
      <Route path="/user/:userId" element={<UserProfile />} />
    </Routes>
  );
}

嵌套路由

嵌套路由用于在父路由下定义子路由。在父组件中使用 Outlet 组件渲染子路由内容。

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

function Layout() {
  return (
    <div>
      <h1>Layout</h1>
      <Outlet />
    </div>
  );
}

function Dashboard() {
  return <div>Dashboard</div>;
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route path="dashboard" element={<Dashboard />} />
      </Route>
    </Routes>
  );
}

导航链接

使用 Link 组件在页面间导航，避免页面刷新。NavLink 组件可以高亮当前活动链接。

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

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <NavLink to="/about" activeClassName="active">About</NavLink>
    </nav>
  );
}

编程式导航

通过 useNavigate 钩子实现编程式导航，例如在表单提交后跳转页面。

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

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

  const handleLogin = () => {
    navigate('/dashboard');
  };

  return <button onClick={handleLogin}>Login</button>;
}

路由守卫

通过自定义组件实现路由守卫，例如检查用户是否登录。在路由配置中使用条件渲染。

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

function PrivateRoute({ element }) {
  const isAuthenticated = true; // 替换为实际的认证逻辑
  return isAuthenticated ? element : <Navigate to="/login" />;
}

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

路由懒加载

使用 React.lazy 和 Suspense 实现路由懒加载，优化性能。

在react中如何设置路由

import { Suspense, lazy } from 'react';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}