React之旅-04 路由详解

发布于:2025-02-25 ⋅ 阅读:(126) ⋅ 点赞:(0)

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

  • BrowserRouter:为应用程序提供路由环境,示例代码:
import { BrowserRouter } from 'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);
  • RoutesRoute:定义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>
  );
}