react路由如何安装

安装 React 路由的步骤

方法 1：使用 react-router-dom（推荐）

在 React 项目中安装 react-router-dom，这是 React 官方推荐的路由库。

npm install react-router-dom

或者使用 Yarn：

yarn add react-router-dom

方法 2：初始化 React 项目（如尚未创建）

如果尚未创建 React 项目，需先初始化：

npx create-react-app my-app
cd my-app

随后再安装 react-router-dom。

基本路由配置示例

在 App.js 或主入口文件中引入路由组件并配置：

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";

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

export default App;

动态路由与嵌套路由

支持动态参数和嵌套路由：

<Route path="/user/:id" element={<UserProfile />} />
<Route path="/dashboard" element={<Dashboard />}>
  <Route path="settings" element={<Settings />} />
</Route>

其他路由模式

若需使用哈希路由（HashRouter），替换 BrowserRouter：

import { HashRouter as Router } from "react-router-dom";

注意事项

• 确保 React 版本 ≥ 16.8（支持 Hooks）。
• react-router-dom v6 及以上版本使用 Routes 替代 Switch。
• 生产环境需配置服务器支持前端路由（如 Nginx 或 Apache 的 try_files）。