如何在 react-router v4 中通过 history.push/Link/Redirect 传递参数？

您可以使用，

this.props.history.push("/template", { ...response }) 或 this.props.history.push("/template", { response: response })

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

const state = this.props.location.state

阅读有关 React 的更多信息Session History Management

---

如果您需要传递 URL 参数

Tyler McGinnis 在他的网站上有一个很棒的帖子解释，Link to the post

以下是代码示例：

在 history.push 组件上：this.props.history.push(`/home:${this.state.userID}`) 在路由器组件上定义路由： 在 Home 组件上：

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

---

使用 Hooks 响应 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>
  );
}

---

经过

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

}

Here 是一个工作示例

---

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

奖金

如果要重置接收状态。使用 history 替换位置，如下所示

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

currentPath 是 目标组件 路径 resetState 是新的值状态，无论你想要什么

---

要使用 React 16.8 (withHooks) 功能组件，您可以使用这种方式 我们将 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 router dom version 6.2.1 useHistory() deprecated changed useNavigate()

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

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

---

没有必要使用 withRouter。这对我有用：

在您的父页面中，

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

---

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

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

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

---