当前位置：首页 > React

react项目如何配置路由

2026-01-24 10:40:38React

配置React路由的基本方法

在React项目中配置路由通常使用react-router-dom库。以下是基本配置步骤：

安装依赖包：

npm install react-router-dom

创建路由配置文件

在项目src目录下创建App.js或单独的路由配置文件：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

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

创建页面组件

在src/pages目录下创建对应的页面组件：

react项目如何配置路由

// Home.js
function Home() {
  return <h1>Home Page</h1>;
}

添加导航链接

在需要导航的地方使用Link组件：

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

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

处理动态路由

对于带参数的路由可以这样配置：

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

在组件中获取参数：

react项目如何配置路由

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

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

配置404页面

添加通配路由处理未匹配路径：

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

使用嵌套路由

对于有布局的页面可以使用嵌套路由：

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

编程式导航

在组件中使用useNavigate进行编程式导航：

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

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

  const handleLogin = () => {
    navigate('/dashboard');
  };

  return <button onClick={handleLogin}>Login</button>;
}

以上配置涵盖了React路由的基本用法，可以根据项目需求进行扩展和调整。