如何在 React Router Dom 的 useHistory 中发送参数？答案

【问题标题】：How to send params in useHistory of React Router Dom?如何在 React Router Dom 的 useHistory 中发送参数？
【发布时间】：2020-04-15 06:35:27
【问题描述】：

我正在使用 React Router 挂钩进行导航 useHistory。

导航：history.push("/home", { update: true });

在家里：我正在尝试获取参数let {update} = useParams();

但update 始终未定义。这段代码有什么问题。有什么建议吗？

【问题讨论】：

你能在这里多放一点代码吗？可能是你的组件。这会让 que 更清楚
已经解决了。我需要使用useLocation 钩子而不是useParams

标签： reactjs react-hooks react-router-dom

【解决方案1】：

history.push()方法中的第二个参数其实就是所谓的位置状态，

history.push(path, [state])

根据您的要求，您可能希望将update 作为位置状态或查询字符串的一部分传递。

history.push({
  pathname: '/home',
  search: '?update=true',  // query string
  state: {  // location state
    update: true, 
  },
});

如 React-Router documentation 所述，您可以通过访问 location 属性来访问状态。在您的情况下，要获取 update 的值，

关于类组件，假设连接到路由器，

this.props.location

对于功能组件，您可以使用useLocation 挂钩来访问位置对象。

import { useLocation } from 'react-router-dom';
.
.
const location = useLocation();

console.log(location.state.update)  // for location state
console.log(location.search)  // for query strings;

【讨论】：

谢谢。它有助于。我需要使用useLocation 钩子而不是useParams

【解决方案2】：

这就是你可以通过的方式

history.push("/home", { update: true });

如果它是无状态组件，则像这样访问。

props.location.state.update;

if 基于类的组件。

this.props.location.update;

【讨论】：

哈希历史不再支持location.update，移至location.state.update

【解决方案3】：

如果您使用 React Hooks，请遵循此方法，因为 this.props 仅在 React 类中可用。

组件一：

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

const ComponentOne = () => {
    const history = useHistory();
    const handleSubmit = () => {
        history.push('/component-two',{params:'Hello World'})
    }
    return (
        <div>
            <button onClick={() => {handleSubmit()}}>Fire</button>
        </div>
    )
}

组件二：

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

const ComponentTwo = () => {
    const location = useLocation();
    const myparam = location.state.params;
    return (
        <div>
            <p>{myparam}</p>
        </div>
    )
}

【讨论】：

【解决方案4】：

如果您使用的是函数式组件，还有一种更简单的方法可以访问传递的状态：

首先，在history.push中传入状态

history = useHistory();
history.push('/path-to-component-2', 'state')

接下来，你可以在 location 道具中检索状态

const Component2 = ({ location }) => {
  console.log(location.state);
  return null;
};

【讨论】：