React Router 的使用

安装和基本配置

bash

npm install react-router-dom

npm install react-router-dom

入口文件 index.js\main.js

jsx

// src/index.js
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

// src/index.js
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

创建路由

jsx

// src/App.js
import React from "react";
import { Routes, Route } from "react-router-dom";

// 假设这些组件已经被创建
import Home from "./pages/Home";
import About from "./pages/About";
import Dashboard from "./pages/Dashboard";

function App() {
  return (
    <div>
      {/* 这里可以放导航栏等持久化UI */}
      <nav>...</nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </div>
  );
}
export default App;

// src/App.js
import React from "react";
import { Routes, Route } from "react-router-dom";

// 假设这些组件已经被创建
import Home from "./pages/Home";
import About from "./pages/About";
import Dashboard from "./pages/Dashboard";

function App() {
  return (
    <div>
      {/* 这里可以放导航栏等持久化UI */}
      <nav>...</nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </div>
  );
}
export default App;

Routes 组件包裹了所有独立的路由规则。
Route 组件定义了一条路由规则。
path 属性定义了 URL 路径。
element 属性接收一个 JSX 元素（也就是你要渲染的组件），这和 Vue 的 component 属性类似。

导航链接 (`<Link>`)

在页面之间跳转

jsx

// 在任何组件中都可以使用
import React from "react";
import { Link } from "react-router-dom";

function Navigation() {
  return (
    <nav>
      <Link to="/">首页</Link> |<Link to="/about">关于</Link> |
      <Link to="/dashboard">仪表盘</Link>
    </nav>
  );
}

// 你可以将 <Navigation /> 组件放到 App.js 中
function App() {
  return (
    <div>
      <Navigation />
      <Routes>{/* ... 路由定义 ... */}</Routes>
    </div>
  );
}

// 在任何组件中都可以使用
import React from "react";
import { Link } from "react-router-dom";

function Navigation() {
  return (
    <nav>
      <Link to="/">首页</Link> |<Link to="/about">关于</Link> |
      <Link to="/dashboard">仪表盘</Link>
    </nav>
  );
}

// 你可以将 <Navigation /> 组件放到 App.js 中
function App() {
  return (
    <div>
      <Navigation />
      <Routes>{/* ... 路由定义 ... */}</Routes>
    </div>
  );
}

动态路由和获取参数：

/users/:id 来显示特定用户的信息。

jsx

// src/pages/UserProfile.js
import React from "react";
import { useParams } from "react-router-dom";

function UserProfile() {
  // useParams() 返回一个包含所有URL参数的对象
  const params = useParams(); // 例如 { userId: '123' }

  return (
    <div>
      <h1>用户个人资料</h1>
      <p>当前查看的用户ID是: {params.userId}</p>
    </div>
  );
}

export default UserProfile;

// src/pages/UserProfile.js
import React from "react";
import { useParams } from "react-router-dom";

function UserProfile() {
  // useParams() 返回一个包含所有URL参数的对象
  const params = useParams(); // 例如 { userId: '123' }

  return (
    <div>
      <h1>用户个人资料</h1>
      <p>当前查看的用户ID是: {params.userId}</p>
    </div>
  );
}

export default UserProfile;

编程式导航

有时候我们需要在执行完某个函数后（例如，登录成功后）再跳转页面。

react-router-dom 提供了 useNavigate Hook 来实现这个功能。

jsx

import React from "react";
import { useNavigate } from "react-router-dom";

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

  const handleLogin = () => {
    // ...执行登录逻辑...
    console.log("登录成功，即将跳转...");
    // 跳转到仪表盘页面
    navigate("/dashboard");
  };

  return <button onClick={handleLogin}>登录</button>;
}
export default LoginButton;

import React from "react";
import { useNavigate } from "react-router-dom";

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

  const handleLogin = () => {
    // ...执行登录逻辑...
    console.log("登录成功，即将跳转...");
    // 跳转到仪表盘页面
    navigate("/dashboard");
  };

  return <button onClick={handleLogin}>登录</button>;
}
export default LoginButton;

React Router 的使用 ​

安装和基本配置 ​

创建路由 ​

导航链接 (<Link>) ​

动态路由和获取参数： ​

编程式导航 ​

React Router 的使用

安装和基本配置

创建路由

导航链接 (`<Link>`)

动态路由和获取参数：

编程式导航