我创建了一个自定义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}`,
});
                  

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

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

要使用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

没有必要与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会话历史管理的信息