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）。
