首先，你不需要做var r = this;，因为在if statement中引用的是回调本身的上下文，而因为你使用的是箭头函数，所以引用的是React组件上下文。

根据文件:

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

• length - (number)历史堆栈中的条目数
• action - (string)当前动作(PUSH, REPLACE或POP)

• location - (object)当前位置。可能具有以下特性:

  • pathname - (string) URL的路径
  • search - (string) URL查询字符串
  • hash - (string) URL散列片段
  • state - (string)位置特定的状态，当该位置被推送到对象时，提供给例如push(path, state) 堆栈。
  . . 李< / ul > < / >
  • push(path， [state]) - (function)将一个新条目压入历史堆栈
  • replace(path， [state]) - (function)替换历史堆栈中的当前条目
  • go(n) - (function)在历史堆栈中移动n个指针
  • goBack() -(函数)等价于go(-1)
  • goForward() -(函数)等价于go(1)
  • block(prompt) - (function)阻止导航

在导航时，你可以将道具传递给历史对象，比如

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>

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

this.props.location.state.detail

还要记住，当使用来自props的历史或位置对象时，你需要将组件与withRouter连接起来。

根据文档:

withRouter

您可以访问历史对象的属性和最接近的 <Route>'s通过withRouter高阶组件进行匹配。withRouter 将重新渲染它的组件时，每次路由改变 与<Route>相同的道具呈现props: { match, location, history }.

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

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

没有必要与throuter一起使用。这对我来说很管用:

在父页面中，

<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

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

如果你需要传递URL参数

Tyler McGinnis在他的网站链接到文章上有一个很好的解释

下面是代码示例:

1. < p > 关于历史。将组件:

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

2. < p > 在路由器组件上定义路由:

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

3. Home组件的:

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

你可以用，

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

const state = this.props.location.state

阅读有关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

扩展解决方案(由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]);


};

1. 对于早些时候版本:

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

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

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

2. 对于更新的版本上述方法效果很好，但有一个新的方法:

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

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

   • < p >类组件

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

   • < p >功能组件

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

有时需要使用Link或NavLink组件，而不是使用history.push函数。你可以用下面的like:

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

提示:在最新版本中应该使用state键名。

带有钩子的React TypeScript

来自班级

  this.history.push({
pathname: "/unauthorized",
state: { message: "Hello" },
});

未经授权的功能组件

interface IState {
message?: string;
}


export default function UnAuthorized() {
const location = useLocation();
const message = (location.state as IState).message;


return (
<div className="jumbotron">
<h6>{message}</h6>
</div>
);
}

我创建了一个自定义useQuery钩子

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


const useQuery = (): URLSearchParams => {
return new URLSearchParams(useLocation().search)
}


export default useQuery

使用它作为

const query = useQuery();
const id = query.get("id") as string

就这样发送

history.push({
pathname: "/template",
search: `id=${values.id}`,
});
                  

你可以使用location将状态发送到其他组件，就像这样

在你的源组件

this.props.history.push(pathComponent, sendState);

pathComponent是接收状态的目标组件

在目标组件中 如果您使用类component

• Javascript版本

constructor(props) {
this.state = this.props.location.state
}

• 打印稿版本

constructor(props: {}) {
const receiveState = this.props.location.state as StateType // you must parse into your state interface or type
this.state = receiveState
}

奖金

如果你想重置收到的状态。使用history替换位置，如下所示

this.props.history({pathName: currentPath, state: resetState})

currentPath是目标组件路径 resetState是你想要的新值状态

通过

history.push({pathname:"/yourroute",state: {_id: "0001", name: "AZ"}})

读

import React from 'react';


const YourRoute = props=> {
const { _id, name } = (props.location && props.location.state) || {};
//_id and name will contain the passed data
.
.
.


}

在这里是一个工作的例子