反应获取路由路径 - JavaScript

在编写 React 应用程序时，经常需要获取当前路由的路径。本文将介绍如何使用 React 和 JavaScript 获取和操作路由路径。

获取路由路径

我们可以使用 react-router-dom 中的 useLocation 钩子来获取当前路由路径。该钩子返回一个 location 对象，包含以下属性：

• pathname：路径部分（包括 /），例如 /user/123
• search：查询字符串部分（包括 ?），例如 ?name=abc
• hash：哈希部分（包括 #），例如 #comment-123

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

function MyComponent() {
  const location = useLocation();
  console.log(location.pathname); // 打印当前路径
  // ...
}

操作路由路径

如果我们需要在路由路径上添加、删除或更改某些部分，可以使用 history 对象。类似于 location 对象，history 对象可以使用 useHistory 钩子来获取。

下面是一些常见的操作路由路径的方法：

添加查询字符串参数

import { useHistory, useLocation } from 'react-router-dom';

function MyComponent() {
  const location = useLocation();
  const history = useHistory();

  const handleClick = () => {
    // 添加参数名为 name，值为 abc 的查询字符串到当前路径
    history.push({
      pathname: location.pathname,
      search: new URLSearchParams({
        ...Object.fromEntries(new URLSearchParams(location.search)),
        name: 'abc',
      }).toString(),
    });
  };

  return <button onClick={handleClick}>添加查询字符串参数</button>;
}

删除查询字符串参数

import { useHistory, useLocation } from 'react-router-dom';

function MyComponent() {
  const location = useLocation();
  const history = useHistory();

  const handleClick = () => {
    // 删除名为 name 的查询字符串参数
    const params = new URLSearchParams(location.search);
    params.delete('name');
    history.push({
      pathname: location.pathname,
      search: params.toString(),
    });
  };

  return <button onClick={handleClick}>删除查询字符串参数</button>;
}

更改路径

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

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

  const handleClick = () => {
    // 跳转到 /new-path
    history.push('/new-path');
  };

  return <button onClick={handleClick}>更改路径</button>;
}

结论

在 React 应用程序中，我们可以使用 useLocation 和 useHistory 钩子来获取和操作路由路径。这些功能在构建具有复杂路由逻辑的应用程序时非常有用。