快速上手 React 路由：轻松掌握六大路由 API

2023-05-22 22:51:56

React 路由：六大 API 助你轻松导航单页应用程序

React 路由库是 React 应用程序中不可或缺的工具，它为单页应用程序提供了强大的导航和组织功能。了解 React 路由的核心 API 对于充分利用其特性并构建出色的用户体验至关重要。在这篇博客中，我们将深入探讨六大常用 React 路由 API，让你轻松驾驭页面导航。

Route 组件：URL 与组件的匹配器

Route 组件是 React 路由的基石，它匹配特定的 URL 并渲染相应的组件。通过将 Route 组件添加到应用程序中，你可以定义不同的页面，并在用户导航时动态加载它们。例如：

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

const App = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Switch>
  );
};

在这个例子中，我们定义了三个路由："/"、"/about" 和 "/contact"，它们分别与 Home、About 和 Contact 组件相对应。当用户访问不同的 URL 时，相应的组件将被渲染，呈现不同的页面内容。

Switch 组件：防止多重渲染的守门员

Switch 组件在 React 路由中发挥着重要的作用，它确保一次只能渲染一个 Route 组件。如果没有 Switch 组件，多个 Route 可能会同时渲染，导致冲突和混乱。Switch 组件作为路由守卫，防止此类情况发生，确保应用程序导航始终井然有序。

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

const App = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  );
};

在此示例中，如果用户访问 "/about" 路由，则 About 组件将被渲染，而 Home 组件将被隐藏。Switch 组件充当守门员，只允许与当前 URL 相匹配的路由渲染其组件。

Link 组件：导航的桥梁

Link 组件是 React 路由中用于创建应用程序内导航链接的便捷工具。它提供了一种非侵入式的方式在应用程序的不同部分之间切换，无需重新加载整个页面。

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

const App = () => {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
};

在这个例子中，我们创建了一个导航栏，其中包含指向 "/"、"/about" 和 "/contact" 路由的链接。当用户单击这些链接时，他们将无缝地导航到相应的页面，而不会中断应用程序的流程。

useHistory hook：历史记录的掌控者

useHistory hook 赋予你对应用程序浏览器历史记录的控制权。它提供了操作历史记录的各种方法，包括向前、向后导航和替换历史记录中的条目。

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

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

  const handleClick = () => {
    history.push("/about");
  };

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

在这个示例中，我们使用 useHistory hook 来创建了一个按钮，当用户单击它时，它将把用户导航到 "/about" 路由，并将该条目添加到浏览器历史记录中。

useLocation hook：当前 URL 的洞察者

useLocation hook 允许你访问当前 URL 的详细信息，包括路径名、查询参数和哈希值。它提供了一种简洁的方式来了解应用程序当前所处的状态。

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

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

  console.log(location.pathname); // "/about"
  console.log(location.search); // "?id=123"
  console.log(location.hash); // "#section-1"

  return null;
};

在此示例中，我们使用 useLocation hook 来获取当前 URL 的信息，并在控制台中打印它们。这对于根据当前 URL 动态调整应用程序的行为很有用。

useParams hook：动态路由参数的访问器

useParams hook 允许你访问动态路由中的参数。动态路由允许你创建具有可变部分的 URL，这在构建可重复使用的组件和处理动态数据时非常有用。

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

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

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

  return null;
};