如何在react-path v4中传递带有history.push的params？

Question

我们如何this.props.history.push('/page')在React-Router v4中传递参数？

.then(response => {
       var r = this;
        if (response.status >= 200 && response.status < 300) {
             r.props.history.push('/template');
          });

Answer 1

首先,你不需要这样做,var r = this;因为它if statement指的是回调本身的上下文,因为你使用箭头函数指的是React组件上下文.

根据文件:

历史对象通常具有以下属性和方法:

• length - (number)历史堆栈中的条目数
• action - (字符串)当前操作(PUSH,REPLACE或POP)

• location - (object)当前位置.可能具有以下属性:

  • pathname - (字符串)URL的路径
  • search - (字符串)URL查询字符串
  • hash - (字符串)URL哈希片段
  • state - (字符串)特定于位置的状态,当此位置被推入堆栈时,该状态被提供给例如push(路径,状态).仅适用于浏览器和内存历史记录.
• push(path,[state]) - (function)将新条目推送到历史堆栈
• replace(path,[state]) - (function)替换历史堆栈中的当前条目
• go(n) - (function)通过n个条目移动历史堆栈中的指针
• goBack() - (function)相当于go(-1)
• goForward() - (function)相当于go(1)
• 块(提示) - (功能)防止导航

因此,在导航时,您可以将道具传递给历史对象,例如

this.props.history.push({
  pathname: '/template',
  search: '?query=abc',
  state: { detail: response.data }
})

或类似的Link组件或Redirect组件

<Link to={{
      pathname: '/template',
      search: '?query=abc',
      state: { detail: response.data }
    }}> My Link </Link>

然后在使用/template路径渲染的组件中,您可以访问传递的道具

this.props.location.state.detail

另请注意,在使用道具中的历史记录或位置对象时,您需要连接组件withRouter.

根据文件:

withRouter

您可以<Route>'s通过withRouter高阶组件访问历史对象的属性和最接近的 匹配.withRouter 每次路线改变时都会重新渲染其组件,并使用与<Route>渲染相同的道具props: { match, location, history }.

Answer 2

扩展解决方案（由 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]);

};

Answer 3

1. 对于早期版本：

   history.push('/[pathToSomeWhere]', yourData);
   

   并在相关组件中获取数据，如下所示：

   this.props.location.state // it is equal to yourData
   

2. 对于较新的版本，上述方法效果很好，但有一种新方法：

   history.push({
     pathname: '/[pathToSomeWhere]',
     state: yourData,
   });
   

   并在相关组件中获取数据，如下所示：

   • 类组件

     this.props.location.state; // it is equal to yourData
     

   • 功能组件

     const location = useLocation();
     location.state; // it is equal to yourData
     

有时需要使用Link或NavLink组件而不是使用history.push功能。你可以像下面这样使用：

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

提示：state密钥名称应在最新版本中使用。

Answer 4

您可以使用，

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

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

const state = this.props.location.state

这是API文档的链接

Answer 5

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

Answer 6

经过

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

}

这是一个工作示例

Answer 7

如果您需要传递URL参数

泰勒·麦金尼斯（Tyler McGinnis）在他的网站上发表了精彩的帖子解释，链接到该帖子

以下是代码示例：

1. 在history.push组件上：

   this.props.history.push(/home:${this.state.userID})

2. 在路由器组件上，您定义路由：

   <Route path='/home:myKey' component={Home} />

3. 在主页组件上：

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

Answer 8

要使用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 版本 6.2.1
useHistory() 已弃用更改useNavigate()

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

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

Answer 9

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

Answer 10

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