react路由如何安装

安装 React 路由

React 路由通常通过 react-router-dom 库实现，以下是安装和基本配置方法。

安装依赖 在项目根目录下运行以下命令安装 react-router-dom：

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>
  );
}

路由导航 在组件中使用 Link 实现导航跳转：

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

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

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

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

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

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

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