nodejs22: React路由导航组件库 react-router-dom

• react-router-dom 库中导入了几个重要的组件，用于在 React 应用中实现路由功能。具体来说：

  • BrowserRouter：BrowserRouter 是一个路由容器，利用 HTML5 的 History API 来管理路由（即 URL 地址的变化）。

  • Routes：Routes是一个容器组件，用于包裹和管理多个 Route 路由。React Router 会根据当前的 URL 匹配到合适的 Route 组件。

  • Route：定义一个具体的路由规则。它指定某个 URL 路径应该渲染哪个 React 组件。例如，<Route path="/home" element={<Home />} /> 会在 URL 路径为 /home 时渲染 Home 组件。

  • Navigate：Navigate用于实现程序化的跳转，可以在代码中控制路由的跳转，而不是通过 <Link> 标签来手动跳转。例如，<Navigate to="/login" /> 会使应用自动跳转到 /login 页面。

简单例子：

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

function App() {
   
  return (
    <Router>
      <Routes>
        <Route path="/" element={
   <Home />} />
        <Route path="/about" element={
   <About />} />
        <Route path="/login" element={
   <Login />} />
        <Route path="*" element={
   <Navigate to="/login" />} />
      </Routes>
    </Router>
  );
}

• 如果访问 http://localhost:3000/about，会显示 About 组件。
• 如果访问的路径不匹配任何已定义的路由（例如 http://localhost:3000/nonexistent），Navigate 会将用户重定向到 /login 页面。

完整代码

import React from 'react';
import {
    BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';

// 定义 Home 组件
function Home() {
   
  return <h2>欢迎来到首页！</h2>;
}

// 定义 About 组件
function About() {
   
  return <h2>关于我们</h2>;
}

// 定义 Login 组件
function Login() {
   
  return <h2>登录页面</h2>;
}

// App 组件，设置路由
function App(</