当前位置：首页 > React

react项目如何配置路由

2026-03-10 18:57:48React

安装 react-router-dom

在 React 项目中配置路由需要安装 react-router-dom 库。通过 npm 或 yarn 安装：

npm install react-router-dom
# 或
yarn add react-router-dom

创建路由组件

在项目入口文件（如 App.js 或 index.js）中引入 BrowserRouter 或 HashRouter，并包裹根组件：

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

function App() {
  return (
    <Router>
      {/* 其他组件和路由配置 */}
    </Router>
  );
}

定义路由规则

使用 Routes 和 Route 组件定义路由规则。Route 的 path 属性指定路径，element 属性指定渲染的组件：

react项目如何配置路由

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

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

嵌套路由配置

若需嵌套路由，在父路由的组件中再次使用 Routes 和 Route：

<Route path="/user" element={<UserLayout />}>
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>

导航跳转

使用 Link 或 NavLink 组件实现页面跳转，避免页面刷新：

react项目如何配置路由

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

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

动态路由与参数

通过 :param 定义动态路由，使用 useParams 获取参数：

<Route path="/post/:id" element={<PostDetail />} />

// PostDetail 组件内
import { useParams } from 'react-router-dom';
function PostDetail() {
  const { id } = useParams();
  return <div>Post ID: {id}</div>;
}

重定向与 404 处理

使用 Navigate 实现重定向，通配符 * 匹配未定义的路由：

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

<Routes>
  <Route path="/old" element={<Navigate to="/new" />} />
  <Route path="*" element={<NotFound />} />
</Routes>

路由懒加载

结合 React.lazy 和 Suspense 实现懒加载，优化性能：

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

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