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() {
  return (
    <Router>
      <div>
        <h1>React Router 示例</h1>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/login" element={<Login />} />
          <Route path="*" element={<Navigate to="/login" />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

添加导航栏

import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, Link, useNavigate } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHome, faSignInAlt, faUserPlus, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';

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

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

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

// 定义一个导航栏组件
const Navigation = ({ isAuthenticated, setIsAuthenticated }) => {
  const navigate = useNavigate();

  // 处理登出逻辑
  const handleLogout = () => {
    setIsAuthenticated(false);
    navigate('/login');
  };

  return (
    <nav className="bg-gray-800 p-4">
      <div className="container mx-auto flex justify-between items-center">
        {/* 左侧导航链接 */}
        <div className="flex items-center space-x-4">
          <Link to="/" className="text-white hover:text-gray-300">
            <FontAwesomeIcon icon={faHome} className="mr-2" />
            首页
          </Link>
          <Link to="/about" className="text-white hover:text-gray-300">
            关于我们
          </Link>
        </div>

        {/* 右侧认证相关链接 */}
        <div className="flex items-center space-x-4">
          {isAuthenticated ? (
            <>
              <button
                onClick={handleLogout}
                className="text-white hover:text-gray-300"
              >
                <FontAwesomeIcon icon={faSignOutAlt} className="mr-2" />
                退出
              </button>
            </>
          ) : (
            <>
              <Link to="/login" className="text-white hover:text-gray-300">
                <FontAwesomeIcon icon={faSignInAlt} className="mr-2" />
                登录
              </Link>
              <Link to="/register" className="text-white hover:text-gray-300">
                <FontAwesomeIcon icon={faUserPlus} className="mr-2" />
                注册
              </Link>
            </>
          )}
        </div>
      </div>
    </nav>
  );
};

// 主应用组件
function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false); // 模拟用户登录状态

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

export default App;

受保护的路由组件

// 受保护的路由组件
const ProtectedRoute = ({ children, isAuthenticated }) => {
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  return children;
};

• 使用时将COMPONENT 用ProtectedRoute包装：

 <ProtectedRoute isAuthenticated={isAuthenticated}>
   <COMPONENT />
 </ProtectedRoute>

完整代码

• 当用户访问 /profile 页面时，ProtectedRoute 会检查 isAuthenticated，因为它是 false，所以会通过 Navigate 重定向到 /login 页面。

• 点击登录会跳转到profile页面：

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

// 受保护的路由组件
const ProtectedRoute = ({ children, isAuthenticated }) => {
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  return children;
};

// 模拟的组件
function Home() {
  return <h2>首页</h2>;
}

function Profile() {
  return <h2>个人资料</h2>;
}

function Login({ setIsAuthenticated }) {
  const navigate = useNavigate();
  const handleLogin = () => {// 模拟登录过程
    setIsAuthenticated(true); // 登录成功，设置认证状态
    navigate("/profile"); // 登录成功后，跳转到个人资料页
  };

  return (
    <div>
      <h2>登录页面</h2>
      <button onClick={handleLogin}>点击登录</button>
    </div>
  );
}

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false); // 模拟认证状态

  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route
          path="/profile"
          element={
            <ProtectedRoute isAuthenticated={isAuthenticated}>
              <Profile />
            </ProtectedRoute>
          }
        />
         <Route path="/login" element={<Login setIsAuthenticated={setIsAuthenticated} />} />
      </Routes>
    </Router>
  );
}

export default App;