如何在react router v4中通过history.push/Link/Redirect传递参数？

Question

在React Router v4中，如何使用this.props.history.push（'/page'）传递参数？

.then(response => {
       var r = this;
        if (response.status >= 200 && response.status < 300) {
             r.props.history.push('/template');
          });

Answer 1

>

对于早期版本：

history.push('/[pathToSomeWhere]', yourData);

并获取相关组件中的数据，如下所示：

this.props.location.state // it is equal to yourData

对于较新版本，上述方法效果良好，但有一种新方法：

history.push({
  pathname: '/[pathToSomeWhere]',
  state: yourData,
});

并获取相关组件中的数据，如下所示：

>

this.props.location.state; // it is equal to yourData

功能部件

const location = useLocation();
location.state; // it is equal to yourData

有时需要使用Link或NavLink组件，而不是使用history.push函数。

<Link
  to={{
    pathname: '/[pathToSomeWhere]',
    state: yourData
  }}
> 
  ...
</Link>

提示：最新版本中应使用状态键名。

Answer 2

将溶液（由Shubham Khatri建议）扩展至与反应挂钩（16.8及以后）一起使用：

package.json (always worth updating to latest packages)

{
     ...

     "react": "^16.12.0",
     "react-router-dom": "^5.1.2",

     ...
}

通过历史推送传递参数：

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

const FirstPage = props => {
    let history = useHistory();

    const someEventHandler = event => {
       history.push({
           pathname: '/secondpage',
           search: '?query=abc',
           state: { detail: 'some_value' }
       });
    };

};

export default FirstPage;

使用“react router dom”中的useLocation访问传递的参数：

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

const SecondPage = props => {
    const location = useLocation();

    useEffect(() => {
       console.log(location.pathname); // result: '/secondpage'
       console.log(location.search); // result: '?query=abc'
       console.log(location.state.detail); // result: 'some_value'
    }, [location]);

};

Answer 3

首先，您不需要执行var r=this 如if语句中所述引用了回调本身的上下文，因为您使用的是arrow函数，所以它引用了React组件上下文。

历史对象通常具有以下属性和方法：

>

长度-（数字）历史堆栈中的条目数

action-（string）当前操作（PUSH、REPLACE或POP）

位置-（对象）当前位置。可能具有以下属性：

• 路径名-（字符串）URL的路径
• 搜索-（字符串）URL查询字符串
• 哈希-（字符串）URL哈希片段
• 状态-（字符串）将此位置推送到堆栈上时提供给例如push（路径、状态）的特定于位置的状态。仅在浏览器和内存历史记录中可用

因此，在导航时，您可以将道具传递给历史对象，例如

this.props.history.push({
  pathname: '/template',
  search: '?query=abc',
  state: { detail: response.data }
})

或者类似地，对于链接组件或重定向组件

<Link to={{
      pathname: '/template',
      search: '?query=abc',
      state: { detail: response.data }
    }}> My Link </Link>

然后在使用/template路径呈现的组件中，您可以访问传递的道具，如

this.props.location.state.detail

还请记住，当使用来自props的历史或位置对象时，您需要将组件与路由器连接。

带路由器

您可以访问历史对象的属性和最近的