如何在react-router v4中使用history.push / Link / Redirect传递参数？

我们如何this.props.history.push('/page')在React-Router v4中传递参数？

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

首先，您不需要这样做，var r = this;因为它使用的if statement是回调本身的上下文，因为您使用的是箭头功能，因此它是指React组件的上下文。

根据文档：

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

• 长度-（数字）历史记录堆栈中的条目数
• action-（字符串）当前操作（PUSH，REPLACE或POP）

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

  • pathname-（字符串）URL的路径
  • 搜索-（字符串）URL查询字符串
  • hash-（字符串）URL哈希片段
  • 状态-（字符串）特定于位置的状态，当该位置被推入堆栈时提供给例如push（path，state）。仅在浏览器和内存历史记录中可用。
• push（path，[state]）-（函数）将新条目推入历史堆栈
• replace（path，[state]）-（函数）替换历史记录堆栈上的当前条目
• go（n）-（函数）将历史记录堆栈中的指针移动n个条目
• goBack（）-（函数）等同于go（-1）
• goForward（）-（函数）等同于go（1）
• 块（提示）-（功能）防止导航

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

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

或类似地对于一个Link或多个Redirect组件

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

然后在使用/templateroute 渲染的组件中，您可以访问像

this.props.location.state.detail

另外请记住，在使用道具中的历史记录或位置对象时，您需要将组件与相连withRouter。

根据文档：

与路由器

您可以<Route>'s通过withRouter高阶组件访问历史对象的属性和最接近的 匹配项。withRouter 每当路线更改时，都会使用与<Route>render 相同的props重新渲染其组件props: { match, location, history }。

您可以使用，

this.props.history.push("/template", { ...response }) 要么 this.props.history.push("/template", { response: response })

然后您可以/template通过以下代码从组件访问已解析的数据，

const state = this.props.location.state

阅读更多有关React Session History Management的信息

• 对于早期版本：

  history.push('/path', yourData);

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

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

• 对于较新的版本，上述方法行之有效，但是有一种新方法：

  history.push({
    pathname: '/path',
    customNameData: yourData,
  });

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

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

提示：state密钥名称在较早的版本中使用，对于较新的版本，您可以使用自定义名称来传递数据，并且使用state名称不是必需的。

扩展解决方案（由Shubham Khatri建议）以与React钩子一起使用（从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]);

};

如果您需要传递URL参数

泰勒·麦金尼斯（Tyler McGinnis）在他的网站上发表了精彩的帖子解释，链接到该帖子

以下是代码示例：

1. 在history.push组件上：

   this.props.history.push(`/home:${this.state.userID}`)

2. 在路由器组件上，您定义路由：

   <Route path='/home:myKey' component={Home} />

3. 在主页组件上：

componentDidMount(){
    const { myKey } = this.props.match.params
    console.log(myKey )
}

不需要与路由器一起使用。这对我有用：

在您的父页面中，

<BrowserRouter>
   <Switch>
        <Route path="/routeA" render={(props)=> (
          <ComponentA {...props} propDummy={50} />
        )} />

        <Route path="/routeB" render={(props)=> (
          <ComponentB {...props} propWhatever={100} />
          )} /> 
      </Switch>
</BrowserRouter>

然后可以在ComponentA或ComponentB中访问

此道具历史

对象，包括this.props.history.push方法。

要使用React 16.8+（withHooks）您可以使用这种方式

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

export default function SomeFunctionalComponent() {
let history = useHistory(); // should be called inside react component

const handleClickButton = () => {    
"funcionAPICALL"
       .then(response => {
             if (response.status >= 200 && response.status < 300) {
                 history.push('/template');
              });
}

return ( <div> Some component stuff 
    <p>To make API POST request and redirect to "/template" click a button API CALL</p>
    <button onClick={handleClickButton}>API CALL<button>
</div>)
} 

在此处获取更多信息https://reacttraining.com/react-router/web/example/auth-workflow

添加信息以获取查询参数。

const queryParams = new URLSearchParams(this.props.location.search);
console.log('assuming query param is id', queryParams.get('id');

有关URLSearchParams的更多信息，请检查此链接 URLSearchParams