react router如何实现

react router 实现方法

React Router 是 React 应用中用于实现路由功能的库，主要用于管理单页应用（SPA）中的页面导航。以下是 React Router 的基本实现方法。

安装 React Router

使用 npm 或 yarn 安装 React Router 的核心库和 DOM 绑定：

npm install react-router-dom

或

yarn add react-router-dom

基本路由配置

在应用中引入 BrowserRouter、Route、Routes 和 Link 组件，配置基本路由：

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

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

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

动态路由

使用动态参数实现动态路由，参数通过 useParams 获取：

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/:id" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

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

嵌套路由

通过嵌套 Route 组件实现嵌套路由：

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

function Profile() {
  return <h2>Profile Page</h2>;
}

function Settings() {
  return <h2>Settings Page</h2>;
}

导航与重定向

使用 Navigate 组件实现重定向，useNavigate 实现编程式导航：

import { Navigate, useNavigate } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/old" element={<Navigate to="/" />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate("/about")}>
      Go to About
    </button>
  );
}

路由守卫

通过自定义组件实现路由守卫，例如检查用户是否登录：

function PrivateRoute({ element }) {
  const isAuthenticated = true; // 替换为实际认证逻辑
  return isAuthenticated ? element : <Navigate to="/login" />;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/private" element={<PrivateRoute element={<PrivatePage />} />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
}

代码分割与懒加载

使用 React.lazy 和 Suspense 实现路由懒加载：

import { lazy, Suspense } from "react";

const LazyComponent = lazy(() => import("./LazyComponent"));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/lazy" element={<LazyComponent />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

以上方法涵盖了 React Router 的基本用法，适用于大多数单页应用的路由需求。