你可以用，

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

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

Const state = this.props.location.state

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

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
     .
     .
     .

}

下面是一个工作示例

您可以使用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是你想要的新值状态

首先，你不需要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}。

没有必要与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方法。

带有钩子的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>
  );
}