react start

react-route-dom

react-router-dom 是 React 中用于处理路由的库，它允许你根据 URL 变化渲染不同的组件。

1. 核心概念

1.1 路由（Router）

react-router-dom 提供了几种不同的路由类型，根据不同的应用场景选择合适的路由。

• BrowserRouter: 使用 HTML5 历史 API (pushState、replaceState) 来保持 UI 和 URL 同步。适用于普通的 Web 应用程序。

  import { BrowserRouter as Router } from "react-router-dom"
  ;<Router>{/* Routes go here */}</Router>

• HashRouter: 使用 URL 的哈希片段 (window.location.hash) 来保持 UI 和 URL 同步，通常用于那些不支持服务端历史 API 的应用。

  import { HashRouter as Router } from "react-router-dom"
  ;<Router>{/* Routes go here */}</Router>

1.2 路由规则（Routes 和 Route）

Routes 组件用于定义路径和组件的匹配。

• Route: 定义路径与组件的映射关系。

  import { Route, Routes } from "react-router-dom"
  ;<Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/contact" element={<Contact />} />
  </Routes>

• element 属性：决定该路径对应的渲染组件。

1.3 Link 和 NavLink

用于导航的组件。

• Link: 用于创建无刷新的链接，不会导致页面刷新。

  import { Link } from "react-router-dom"
  ;<Link to="/about">Go to About</Link>

• NavLink: 类似于 Link，但会根据当前的 URL 自动添加 active 样式类，适合用于导航栏。

  import { NavLink } from "react-router-dom"
  ;<NavLink to="/about" activeClassName="active">
    About
  </NavLink>

1.4 动态路由

你可以通过在路径中定义动态部分，使用 URL 参数。

• 定义动态参数:

  <Route path="/user/:id" element={<User />} />

• 访问参数:

  使用 useParams 钩子来访问动态参数：

  import { useParams } from "react-router-dom"
  
  function User() {
    const { id } = useParams()
    return <div>User ID: {id}</div>
  }

2. 导航和历史管理

2.1 useNavigate

用于编程式导航，允许你在代码中跳转到不同的路径。

import { useNavigate } from "react-router-dom"

function MyComponent() {
  const navigate = useNavigate()

  return <button onClick={() => navigate("/about")}>Go to About</button>
}

2.2 useLocation

用于获取当前的路径信息。

import { useLocation } from "react-router-dom"

function MyComponent() {
  const location = useLocation()

  return <div>Current Path: {location.pathname}</div>
}

2.3 useHistory (React Router v5)

useHistory 是 v5 中的历史导航钩子，在 v6 中被 useNavigate 取代。

3. 嵌套路由

路由可以嵌套在另一个组件内，实现子路由的功能。

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

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route path="home" element={<Home />} />
        <Route path="about" element={<About />} />
      </Route>
    </Routes>
  )
}

<Outlet /> 用于渲染嵌套的路由组件。

import { Outlet } from "react-router-dom"

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

4. 重定向

4.1 Navigate 组件

用于重定向用户到另一个页面。

import { Navigate } from "react-router-dom"

function NotFound() {
  return <Navigate to="/" />
}

4.2 replace 参数

通过 useNavigate 钩子实现页面重定向时，可以使用 replace 参数替换当前历史记录。

navigate("/home", { replace: true })

5. 守卫路由（Protected Route）

用来控制某些路由的访问权限，通常用于登录验证。

function ProtectedRoute({ children }) {
  const auth = useAuth() // 假设这是一个自定义 hook 检查登录状态

  if (!auth) {
    return <Navigate to="/login" />
  }

  return children
}
;<>
  <Routes>
    <Route
      path="/dashboard"
      element={
        <ProtectedRoute>
          <Dashboard />
        </ProtectedRoute>
      }
    />
  </Routes>
</>

6. 404 页面

使用 * 捕获所有未匹配的路径，来创建一个 404 页面。

<Routes>
  <Route path="*" element={<NotFound />} />
</Routes>

7. Query 参数和状态传递

7.1 useSearchParams

可以轻松处理 URL 中的查询参数。

import { useSearchParams } from "react-router-dom"

function SearchPage() {
  const [searchParams, setSearchParams] = useSearchParams()
  const query = searchParams.get("query")

  return <div>Search Query: {query}</div>
}

7.2 状态传递

你可以在导航时传递状态。

navigate("/about", { state: { from: "home" } })

通过 useLocation 获取传递的状态：

const location = useLocation()
console.log(location.state.from)

总结：

• react-router-dom 提供了丰富的 API 来处理单页应用中的路由和导航。
• 它支持动态路由、嵌套路由、守卫路由、404 页面、状态和参数的传递。
• 通过结合 useNavigate、useParams、useLocation 等钩子，可以灵活地管理应用的路由逻辑。