如何在使用中发送参数反应路由器 Dom 的历史?

Question

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

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

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

但update总是不确定的。这段代码有什么问题。有什么建议吗？

Answer 1

history.push()方法中的第二个参数实际上称为位置状态，

history.push(path, [state])

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

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

如 React-Router 文档中所述，您可以通过访问locationprops 来访问状态。在您的情况下，要获取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;

Answer 2

如果你使用的是 React Hooks，请遵循此方法，因为this.props仅在 React Class 中可用。

第一部分：

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>
)
}

Answer 3

这就是你可以通过的方式

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

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

props.location.state.update;

如果基于类的组件。

this.props.location.update;

Answer 4

如果您使用的是功能组件，还有一种更简单的方法来访问传递的状态：

一、通过历史状态。

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

接下来，您可以在位置属性中检索状态

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