首先，你不需要var r = this;就像if语句中引用回调本身的上下文一样，因为你使用的是箭头函数，所以它引用的是React组件上下文。

根据文件:

history objects typically have the following properties and methods: length - (number) The number of entries in the history stack action - (string) The current action (PUSH, REPLACE, or POP) location - (object) The current location. May have the following properties: pathname - (string) The path of the URL search - (string) The URL query string hash - (string) The URL hash fragment state - (string) location-specific state that was provided to e.g. push(path, state) when this location was pushed onto the stack. Only available in browser and memory history. push(path, [state]) - (function) Pushes a new entry onto the history stack replace(path, [state]) - (function) Replaces the current entry on the history stack go(n) - (function) Moves the pointer in the history stack by n entries goBack() - (function) Equivalent to go(-1) goForward() - (function) Equivalent to go(1) block(prompt) - (function) Prevents navigation

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

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 route渲染的组件中，你可以访问传递的道具

this.props.location.state.detail

还要记住，当使用来自道具的历史记录或位置对象时，您需要将组件与throuter连接起来。

根据文档:

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

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

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

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

没有必要与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在他的网站上有一个很好的解释，链接到这个帖子

下面是代码示例:

关于历史。将组件: this.props.history.push(“/ home: $ {this.state.userID}”) 在路由器组件上定义路由: <路由路径='/home:myKey'组件={home} /> Home组件:

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

你可以用，

this.props.history。Push ("/template"，{…响应}) 或 this.props.history。推送("/template"， {response: response})

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

Const state = this.props.location.state

阅读更多关于React会话历史管理的信息

要使用React 16.8+(带hooks)，您可以使用这种方式

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]);

};

For the earlier versions: history.push('/[pathToSomeWhere]', yourData); And get the data in the related component just like below: this.props.location.state // it is equal to yourData For the newer versions the above way works well but there is a new way: history.push({ pathname: '/[pathToSomeWhere]', state: yourData, }); And get the data in the related component just like below: Class Component this.props.location.state; // it is equal to yourData Function Component const location = useLocation(); location.state; // it is equal to yourData

有时需要使用Link或NavLink组件，而不是使用历史记录。推动作用。你可以用下面的like:

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

提示:状态键名称应在最新版本中使用。

带有钩子的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是接收状态的目标组件

在目标组件中 如果您使用类组件，您可以像这样接收状态

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
}

奖金

如果你想重置收到的状态。使用历史记录替换位置，像这样

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

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

Pass

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

Read

import React from 'react';

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

}

下面是一个工作示例

要使用React 16.8(带hooks)功能组件，您可以使用这种方式 我们发送PhoneNumber到Next Page Login.js

    import { useHistory } from 'react-router-dom';
    const history = useHistory();
        const handleOtpVerify=(phoneNumber)=>
          {
               history.push("/OtpVerifiy",{mobNo:phoneNumber})
          } 

<button onClick={handleOtpVerify}> Submit </button>

OtpVerify.js

    import  useLocation  from 'react-router-dom';
    const [phoneNumber, setphoneNumber] = useState("")
        useEffect(() => {
                setphoneNumber(location.state.mobNo)
            }, [location]);
    return (
    <p>We have sent Verification Code to your</p>
    <h1>{phoneNumber}</h1>
    )

React路由器dom版本6.2.1 useNavigate()已弃用

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

 const navigate = useNavigate()
 
 onClick={() => { navigate('/OtpVerifiy',{mobNo:phoneNumber}) }}