当前位置：首页 > React

react当中如何定义路由格式

2026-01-25 01:56:43React

在React中定义路由格式

React中通常使用react-router-dom库来管理路由。以下是定义路由的常见方法：

安装react-router-dom

需要先安装路由库：

npm install react-router-dom

基本路由配置

使用BrowserRouter和Routes组件包裹应用，并在内部定义Route：

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>
  );
}

动态路由参数

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

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

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

react当中如何定义路由格式

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

function UserProfile() {
  const { userId } = useParams();
  // 使用userId
}

嵌套路由

通过<Outlet>实现嵌套路由结构：

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

在DashboardLayout组件中需要放置<Outlet>：

function DashboardLayout() {
  return (
    <div>
      <Sidebar />
      <Outlet />  {/* 嵌套路由内容将在这里渲染 */}
    </div>
  );
}

404路由处理

使用path="*"捕获未匹配的路由：

react当中如何定义路由格式

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

编程式导航

使用useNavigate进行编程式导航：

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

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

  const handleClick = () => {
    navigate('/target-path');
  };
}

路由守卫

通过高阶组件或包装Route实现路由守卫：

<Route 
  path="/admin" 
  element={
    <RequireAuth>
      <AdminPage />
    </RequireAuth>
  } 
/>

RequireAuth组件示例：

function RequireAuth({ children }) {
  const isAuthenticated = checkAuth(); // 自定义认证逻辑

  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }

  return children;
}

这些方法覆盖了React中路由定义的主要场景，可根据实际需求组合使用。