当前位置：首页 > React

react路由如何配置

2026-02-26 02:04:11React

路由基础配置

在React中配置路由通常使用react-router-dom库（v6版本）。需先安装依赖：

npm install react-router-dom

在项目入口文件（如index.js或App.js）中引入路由组件：

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

基本路由结构示例：

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

动态路由与参数传递

动态路由通过:定义参数，组件内通过useParams获取：

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

在UserProfile组件中：

react路由如何配置

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

嵌套路由配置

嵌套路由通过<Route>的嵌套实现，父路由需配合<Outlet>渲染子内容：

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

在Dashboard组件中需放置<Outlet />：

import { Outlet } from 'react-router-dom';
function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet /> {/* 子路由内容在此渲染 */}
    </div>
  );
}

编程式导航

通过useNavigate钩子实现页面跳转：

react路由如何配置

import { useNavigate } from 'react-router-dom';
function LoginButton() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate('/dashboard')}>
      Login
    </button>
  );
}

路由守卫与重定向

使用<Navigate>组件或navigate函数实现权限控制：

<Route 
  path="/admin" 
  element={isAdmin ? <AdminPanel /> : <Navigate to="/login" />} 
/>

或在组件内逻辑中处理：

const navigate = useNavigate();
useEffect(() => {
  if (!isLoggedIn) navigate('/login');
}, [isLoggedIn]);

懒加载路由

结合React.lazy和Suspense优化性能：

const AboutPage = React.lazy(() => import('./AboutPage'));
function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Suspense>
  );
}