React-Router-Dom API 详解，入门（一）

2023-11-19 04:08:17

React-Router-Dom API：掌控路由与导航

在现代单页面应用程序（SPA）中，路由扮演着至关重要的角色，它负责管理不同视图之间的导航。React-Router-Dom 是一个强大的 JavaScript 库，为 React 开发者提供了全面的路由解决方案，使他们能够轻松创建动态且用户友好的 SPA。本文将深入探讨 React-Router-Dom API 的各个方面，帮助您充分利用其强大的功能。

React-Router-Dom 的组成部分

React-Router-Dom API 由以下组件组成，共同提供了一套完善的路由管理工具：

useHistory 钩子： 负责处理路由导航，允许您以编程方式更改 URL 并更新应用程序的状态。
useLocation 钩子： 获取有关当前 URL 的信息，例如路径名、查询字符串和哈希。
useParams 钩子： 提取从当前路由匹配的路径参数。
useRouteMatch 钩子： 提供有关当前路由匹配的信息，包括 URL 和参数。
BrowserRouter 和 HashRouter 组件： 作为路由信息提供者，BrowserRouter 使用 HTML5 历史记录 API，而 HashRouter 使用 URL 的哈希部分。
Link 和 NavLink 组件： 分别用于创建简单的导航链接和带有附加功能（如根据当前路由设置样式）的高级导航链接。
Route 组件： 定义路由规则，指定哪些组件在特定 URL 匹配时渲染。
Redirect 组件： 将用户重定向到指定的路径。
Switch 组件： 确保同时只渲染一个匹配的 Route 组件。

useHistory 钩子：掌控路由导航

useHistory 钩子是一个强大的工具，可以让您轻松地控制路由导航。它返回一个 history 对象，该对象提供了一系列用于更新 URL 和应用程序状态的方法：

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

const MyComponent = () => {
  const history = useHistory();

  const handleClick = () => {
    history.push("/new-page");
  };

  return <button onClick={handleClick}>Go to New Page</button>;
};

push(path)： 将一个新条目添加到历史记录堆栈并导航到该路径。
replace(path)： 替换当前历史记录条目并导航到该路径。
go(n)： 在历史记录堆栈中向前或向后移动 n 个条目。
goBack()： 返回到历史记录堆栈中的前一个条目。
goForward()： 前进到历史记录堆栈中的下一个条目。

useLocation 钩子：获取当前 URL 信息

useLocation 钩子允许您获取有关当前 URL 的详细的信息，例如路径名、查询字符串和哈希：

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

const MyComponent = () => {
  const location = useLocation();

  console.log(location.pathname); // "/home"
  console.log(location.search); // "?query=value"
  console.log(location.hash); // "#section"

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

useParams 钩子：提取路径参数

useParams 钩子提供了从当前路由匹配的路径参数：

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

const UserPage = () => {
  const params = useParams();

  console.log(params.id); // "123"

  return <div>User ID: {params.id}</div>;
};

useRouteMatch 钩子：获取路由匹配信息

useRouteMatch 钩子返回有关当前路由匹配的信息，包括 URL 和参数：

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

const UserPage = () => {
  const match = useRouteMatch("/user/:id");

  console.log(match.url); // "/user/123"
  console.log(match.params.id); // "123"

  return <div>User ID: {match.params.id}</div>;
};

Link 和 NavLink 组件：创建导航链接

Link 和 NavLink 组件用于创建导航链接：

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

const MyComponent = () => {
  return <Link to="/new-page">Go to New Page</Link>;
};

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

const MyComponent = () => {
  return (
    <NavLink to="/new-page" activeClassName="active">
      Go to New Page
    </NavLink>
  );
};

NavLink 组件允许您根据当前路由是否与链接匹配来设置样式。

Route 组件：定义路由规则

Route 组件用于定义路由规则，指定哪些组件在特定 URL 匹配时渲染：

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

const MyRoutes = () => {
  return (
    <Switch>
      <Route path="/home" component={HomePage} />
      <Route path="/about" component={AboutPage} />
    </Switch>
  );
};

Switch 组件确保一次只渲染一个匹配的 Route 组件。

Redirect 组件：重定向用户

Redirect 组件将用户重定向到指定的路径：

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

const PrivateRoute = ({ component: Component, ...rest }) => {
  const isAuthenticated = localStorage.getItem("token");

  return isAuthenticated ? <Component {...rest} /> : <Redirect to="/login" />;
};

常见问题解答

1. 如何在 React 应用程序中使用 React-Router-Dom？

在您的项目中安装 React-Router-Dom，然后在应用程序的根组件中包裹 BrowserRouter 或 HashRouter 组件。

2. 如何获取当前 URL 的查询参数？

使用 useLocation 钩子并访问 location.search 属性。

3. 如何在 Route 组件内获取路径参数？

使用 useParams 钩子。

4. 如何在导航时传递状态？

使用 history.push(path, state) 或 history.replace(path, state) 方法。

5. 如何在导航后执行操作？

在组件的 componentDidMount 生命周期方法中使用 history.listen() 方法。

结论

React-Router-Dom API 为 React 开发者提供了丰富的工具，使他们能够创建动态且用户友好的路由和导航体验。通过熟练使用这些组件和钩子，您可以轻松构建复杂的单页面应用程序，提供无缝的用户交互。我们鼓励您探索 React-Router-Dom API 的全部潜力，并利用其功能创建出色的 SPA。