React 路由基础 掌握路由配置与导航

1. 什么是 React 路由？

React 路由是用于在单页面应用（SPA）中管理页面导航的工具。通过路由，可以在不刷新页面的情况下切换视图，提升用户体验。

---

2. 安装 react-router-dom

首先，安装 react-router-dom 库：

npm install react-router-dom

---

3. 基本路由配置

核心组件

• <BrowserRouter>：包裹整个应用，提供基于 HTML5 History API 的路由管理。
• <Routes> 和 <Route>：定义路由规则，<Route> 指定路径和对应的组件。
• <Link>：用于导航，不会刷新页面。

示例代码

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

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

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

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>
  );
}

export default App;

---

4. 动态路由

动态路由允许在 URL 中使用参数，例如 /users/:id。

示例代码

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

function UserDetail() {
  const { id } = useParams(); // 获取动态参数
  return <h1>User ID: {id}</h1>;
}

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

---

5. 嵌套路由

嵌套路由用于在父路由中渲染子路由。

示例代码

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

function Layout() {
  return (
    <div>
      <h1>Layout</h1>
      <Outlet /> {/* 子路由的组件会渲染在这里 */}
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} /> {/* 默认子路由 */}
          <Route path="about" element={<About />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

---

6. 重定向

使用 <Navigate> 组件实现路由重定向。

示例代码

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

function App() {
  const isLoggedIn = false; // 模拟登录状态

  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/dashboard"
          element={isLoggedIn ? <Dashboard /> : <Navigate to="/login" />}
        />
      </Routes>
    </BrowserRouter>
  );
}

---

7. 编程式导航

使用 useNavigate Hook 实现编程式导航。

示例代码

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

function Home() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
}

---

8. 常用 Hooks

• useParams：获取动态路由参数。
• useNavigate：编程式导航。
• useLocation：获取当前路由信息。
• useSearchParams：读取和修改 URL 查询参数。

---

9. 总结

• 基本路由：使用 <BrowserRouter>、<Routes> 和 <Route> 定义路由。
• 动态路由：通过 useParams 获取 URL 参数。
• 嵌套路由：使用 <Outlet> 渲染子路由。
• 重定向：使用 <Navigate> 实现重定向。
• 编程式导航：使用 useNavigate Hook。

---

10. 学习建议

• 多动手实践，尝试不同的路由配置。
• 结合项目需求，灵活使用动态路由和嵌套路由。
• 查阅官方文档：React Router 官方文档