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

你可以用，

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

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

Const state = this.props.location.state

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

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

如果你需要传递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 )
}

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