以简单易懂的方式掌握 React 之路由

前端

2023-12-10 15:43:35

React 路由详解：掌握组件、传参和编程式导航

React 路由概述

在 React 生态中，路由扮演着至关重要的角色。它使我们能够轻松管理应用程序的不同页面，并根据用户操作在页面间切换。React 路由库提供了丰富的组件和 API，助力你构建出色的单页面应用程序。

React 路由组件

React 路由库提供了多种路由组件，每个组件都有其独特的功能：

BrowserRouter： 基于浏览器的路由组件，用于创建基于浏览器的路由系统。
HashRouter： 基于哈希的路由组件，用于创建基于哈希的路由系统。
MemoryRouter： 在内存中创建虚拟路由系统的路由组件。
Route： 定义路由规则的组件，指定特定 URL 路径与哪个组件相关联。
Link： 创建页面间链接的组件，允许用户通过点击链接在不同页面间切换。
Redirect： 用于将用户从一个 URL 路径重定向到另一个 URL 路径的组件。

路由组件传参

React 路由组件支持传参，让你可以在路由间传递数据。有两种主要的方法：

使用 props： 在路由组件之间传递简单数据的常用方法。
使用 state： 在路由组件之间传递复杂数据的合适方法。

代码示例：

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

function App() {
  const [count, setCount] = useState(0);

  return (
    <BrowserRouter>
      <div>
        <h1>Count: {count}</h1>
        <Link to="/increment">Increment</Link>
        <Link to="/decrement">Decrement</Link>

        <Route path="/increment" component={() => setCount(count + 1)} />
        <Route path="/decrement" component={() => setCount(count - 1)} />
      </div>
    </BrowserRouter>
  );
}

export default App;

编程式导航

除了使用组件声明式地定义路由规则，你还可以使用编程式导航来动态控制导航。React 路由库提供了两个主要的方法：

useNavigate： 允许你在组件中进行导航。
useLocation： 允许你访问当前的 URL 路径和查询参数。

代码示例：

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

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

  const handleClick = () => {
    navigate("/page2");
  };

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

常见问题解答

如何设置默认路由？
通过为 <BrowserRouter> 组件指定 initialEntries prop，你可以设置默认路由。
如何防止路由组件重新渲染？
使用 exact prop 可以防止路由组件在 URL 路径发生细微变化时重新渲染。
如何传递自定义对象作为 props？
你可以使用 useParams 钩子从 Route 组件中获取 URL 参数，然后使用 JSON.parse() 解析自定义对象。
如何使用编程式导航回到上一个页面？
你可以使用 useNavigate 钩子，并调用 goBack() 方法。
如何使用 HashRouter 启用哈希路由？
只需在 <BrowserRouter> 组件中使用 HashRouter 组件即可。