当前位置：首页 > React

react如何设置路由

2026-03-31 05:57:40React

在 React 中设置路由通常使用 `react-router-dom` 库，以下是具体实现方法：

安装依赖

确保项目已安装 react-router-dom：

npm install react-router-dom

基本路由配置

使用 BrowserRouter 和 Routes 组件定义路由结构：

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

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

动态路由

通过冒号 : 定义动态参数：

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

在组件中通过 useParams 获取参数：

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

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

嵌套路由

使用 Outlet 实现嵌套布局：

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

在父组件中渲染子路由：

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

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

导航跳转

使用 Link 组件或 useNavigate 钩子：

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

function NavBar() {
  const navigate = useNavigate();
  return (
    <div>
      <Link to="/about">About</Link>
      <button onClick={() => navigate('/contact')}>Go to Contact</button>
    </div>
  );
}

404 路由处理

在路由列表最后添加通配符路径：

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

路由守卫

通过高阶组件或条件渲染控制访问权限：

function PrivateRoute({ children }) {
  const isAuthenticated = checkAuth();
  return isAuthenticated ? children : <Navigate to="/login" />;
}

// 使用方式
<Route path="/admin" element={<PrivateRoute><AdminPanel /></PrivateRoute>} />

代码分割与懒加载

使用 React.lazy 和 Suspense 优化性能：

react如何设置路由

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

<Routes>
  <Route path="/about" element={
    <Suspense fallback={<div>Loading...</div>}>
      <About />
    </Suspense>
  } />
</Routes>