React之旅-04 路由详解

React Router 路由库提供了多种路由组件，详解如下：

• BrowserRouter：为应用程序提供路由环境，示例代码：

import { BrowserRouter } from 'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

• Routes，Route：定义URL和组件之间的映射关系，示例代码：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

• Link：在页面之间导航，无需重新加载整个页面，示例代码：

<Link to="/about">About</Link>

• Outlet：嵌套路由，在父路由组件中嵌套子路由组件，示例代码：

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet /> {/* 嵌套路由的占位符，用于渲染子路由 */}
    </div>
  );
}


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

• 动态路由：允许在路径中使用变量，在实现详情页等场景中非常有用。使用 useParams 提取URL路径中的参数，动态路径 "/user/:id" 会匹配 /user/1 或 /user/xx，示例代码：

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

function UserProfile() {
  const { id } = useParams(); // 从URL中提取参数id
  return <div>User ID: {id}</div>;
}

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<UserProfile />} />
      </Routes>
    </Router>
  );
}

• 查询参数：使用 useSearchParams 获取URL中的查询参数，示例代码：

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

function SearchPage() {
  const [searchParams] = useSearchParams();
  const query = searchParams.get("q");
  const id = searchParams.get("id");
  return (
    <div>
      <h3>Search Query</h3>
        <ul>q: {query}</ul>
        <ul>id: {id}</ul>
    </div>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<UserProfile />} />
        <Route path="/search" element={<SearchPage />} /> /* URL为/search?q=react&id=12345时, 会获取URL中的查询参数 */
      </Routes>
    </BrowserRouter>
  );
}

• 延迟加载：支持动态按需加载页面，从而优化性能，通常 React.lazy 和 Suspense 组合使用，示例代码：

import React, { Suspense, lazy } from "react";
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";

const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));

export default function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

• 404页面：使用通配符*，捕获未定义的路由，示例代码：

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

function NotFound() {
  return <div>Error:404</div>;
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}