当前位置：首页 > React

react如何定义路由

2026-01-23 20:30:45React

定义路由的基本方法

在React中定义路由通常使用react-router-dom库，这是React生态中最流行的路由解决方案。需要安装该库后才能使用路由功能。

npm install react-router-dom

使用BrowserRouter和Routes

在应用的顶层组件中，通常需要用BrowserRouter或HashRouter包裹整个应用。Routes组件用于包含所有路由规则，Route组件定义具体的路径和对应渲染的组件。

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

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

动态路由参数

可以通过冒号语法定义动态路由参数，这些参数可以在匹配的组件中通过useParams钩子获取。

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

// 在UserProfile组件中
import { useParams } from 'react-router-dom';
function UserProfile() {
  const { userId } = useParams();
  return <div>User ID: {userId}</div>;
}

嵌套路由配置

通过将Route组件嵌套在其他Route组件中实现嵌套路由。父路由需要渲染Outlet组件作为子路由的占位符。

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<DashboardHome />} />
  <Route path="settings" element={<DashboardSettings />} />
</Route>

// DashboardLayout组件中需要包含Outlet
import { Outlet } from 'react-router-dom';
function DashboardLayout() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

编程式导航

使用useNavigate钩子可以在组件中进行编程式导航，实现页面跳转而不依赖Link组件。

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

function LoginButton() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate('/dashboard')}>
      Login
    </button>
  );
}

路由守卫实现

通过高阶组件或自定义包装组件可以实现路由守卫，例如检查用户是否已认证。

react如何定义路由

function PrivateRoute({ element }) {
  const isAuthenticated = checkAuth();
  const navigate = useNavigate();

  if (!isAuthenticated) {
    navigate('/login');
    return null;
  }

  return element;
}

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