react路由如何安装

安装 React 路由

React 路由通常通过 react-router-dom 库实现，适用于 Web 应用开发。以下是安装和基础配置的步骤：

安装 react-router-dom 在项目根目录下运行以下命令（确保已安装 Node.js 和 npm/yarn）：

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

基本路由配置示例 在项目入口文件（如 App.js 或 index.js）中引入并配置路由：

import { BrowserRouter as Router, 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>
  );
}

其他路由类型

HashRouter 如果服务器不支持 HTML5 的 history API，可以使用 HashRouter：

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

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

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

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

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

注意事项

• React Router v6 使用 Routes 替代了旧版的 Switch。
• 嵌套路由需配合 Outlet 组件使用。
• 确保项目依赖的 React 版本 >= 16.8（支持 Hooks）。