路由信息

在 React Router v5 中，路由信息是指与当前 URL 和路由匹配相关的一系列数据。这些信息对于动态更新页面内容、处理参数化路径以及执行编程式导航等操作至关重要。以下是关于如何在 React Router v5 中访问和使用路由信息的详细介绍。

主要的路由信息对象

1. history

history 对象允许你操作浏览器的历史记录栈，从而实现编程式的导航。它提供了诸如 push, replace, 和 goBack 等方法。你可以通过 useHistory Hook 或者 withRouter HOC 来访问这个对象。

• 通过 Hook：

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

function GoBackButton() {
  const history = useHistory();

  return <button onClick={() => history.goBack()}>Go Back</button>;
}

• 通过 HOC：

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

function GoBackButton({ history }) {
  return <button onClick={() => history.goBack()}>Go Back</button>;
}

export default withRouter(GoBackButton);

2. location

location 对象包含了当前 URL 的详细信息，包括路径名 (pathname)、查询参数 (search) 和哈希 (hash)。你可以通过 useLocation Hook 或者作为 props 接收来访问这个对象。

• 通过 Hook：

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

function ShowLocation() {
  const location = useLocation();

  return <div>You are at {location.pathname}</div>;
}

• 作为 props：

const ShowLocation = ({ location }) => (
  <div>You are at {location.pathname}</div>
);

3. match

match 对象包含了有关当前 URL 如何匹配特定 <Route path> 的信息。它特别适用于处理参数化路径。你可以通过 useParams Hook 或者作为 props 接收来访问这个对象。

• 通过 Hook：

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

function User({ match }) {
  // 使用 match.params.id
  return <h2>User Profile: {match.params.id}</h2>;
}

// 或者使用 useParams Hook
function UserProfile() {
  let { id } = useParams();
  return <h2>User Profile: {id}</h2>;
}

// 或者使用 useRouteMatch Hook
function ShowMatch() {
  let match = useRouteMatch();
  return (
    <div>
      Path: {match.path}, URL: {match.url}, isExact: {String(match.isExact)}
    </div>
  );
}

• 作为 props：

const User = ({ match }) => <h2>User Profile: {match.params.id}</h2>;

4. staticContext

这个属性主要用于服务端渲染（SSR），它允许你在渲染过程中向上下文中添加数据。对于客户端应用来说，通常不需要直接使用它。

使用 Hooks 访问路由信息

Hooks 是 React Router v5 推荐的方式之一来访问路由信息，它们使得函数组件可以像类组件一样方便地与路由系统交互。

• useHistory：返回 history 对象。
• useLocation：返回 location 对象。
• useParams：返回 match.params。
• useRouteMatch：返回 match 对象或根据提供的路径模式创建一个新的 match 对象。

import React from "react";
import {
  useHistory,
  useLocation,
  useParams,
  useRouteMatch,
} from "react-router-dom";

function RouteInfo() {
  let history = useHistory();
  let location = useLocation();
  let params = useParams();
  let match = useRouteMatch();

  return (
    <div>
      <p>Path: {match.path}</p>
      <p>URL: {match.url}</p>
      <p>Params: {JSON.stringify(params)}</p>
      <p>Location: {location.pathname}</p>
      <button onClick={() => history.push("/")}>Go to Home</button>
    </div>
  );
}

示例代码

以下是一个完整的例子，展示了如何结合上述信息来构建一个简单的单页应用，并展示当前的路由信息：

import React from "react";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import {
  useHistory,
  useLocation,
  useParams,
  useRouteMatch,
} from "react-router-dom";

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Contact = () => <h2>Contact</h2>;

function User({ match }) {
  return <h2>User Profile: {match.params.id}</h2>;
}

function RouteInfo() {
  let history = useHistory();
  let location = useLocation();
  let params = useParams();
  let match = useRouteMatch();

  return (
    <div>
      <p>Path: {match.path}</p>
      <p>URL: {match.url}</p>
      <p>Params: {JSON.stringify(params)}</p>
      <p>Location: {location.pathname}</p>
      <button onClick={() => history.push("/")}>Go to Home</button>
    </div>
  );
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
            <li>
              <Link to="/user/123">User 123</Link>
            </li>
            <li>
              <Link to="/info">Route Info</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
          <Route path="/user/:id" component={User} />
          <Route path="/info" component={RouteInfo} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

总结

理解并正确利用 React Router v5 提供的路由信息是构建高效且用户体验良好的单页应用的关键。通过掌握如何访问和使用 history, location, match 等对象，你可以实现复杂的导航逻辑、处理动态路径参数以及响应 URL 的变化。