如何使用history.push / Link / Redirect在react-router v4中传递params?

时间:2017-05-22 19:53:07

标签: reactjs react-router

如何在React-Router v4中使用this.props.history.push('/page')传递参数?

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

13 个答案:

答案 0 :(得分:226)

首先,您不需要执行var r = this;,因为if statement中的这个引用了回调本身的上下文,因为您使用箭头函数是指React组件上下文。

根据文件:

  

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

     
      
  • length - (number)历史堆栈中的条目数
  •   
  • action - (字符串)当前操作(PUSH,REPLACE或POP)
  •   
  • location - (object)当前位置。可能具有以下属性:

         
        
    • pathname - (字符串)URL的路径
    •   
    • search - (字符串)URL查询字符串
    •   
    • hash - (字符串)URL哈希片段
    •   
    • state - (字符串)提供给例如的位置特定状态推送(路径,状态)此位置被推到   堆。仅适用于浏览器和内存历史记录。
    •   
  •   
  • 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 }相同的道具。

答案 1 :(得分:73)

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

};

答案 2 :(得分:46)

  • 对于早期版本版本:

    history.push('/path', yourData);
    

    并按照以下方式获取相关组件中的数据:

    this.props.location.state // it is equal to yourData
    
  • 对于较新版本上述方法效果很好,但是有一种新方法:

    history.push({
      pathname: '/path',
      customNameData: yourData,
    });
    

    并按照以下方式获取相关组件中的数据:

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

提示:早期版本中使用了state键名,对于较新版本,您可以使用自定义名称来传递数据,而使用state名称则不能必不可少的。

答案 3 :(得分:11)

通过

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 是一个工作示例

答案 4 :(得分:7)

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

答案 5 :(得分:4)

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

答案 6 :(得分:3)

您可以使用

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

然后,您可以通过以下代码

/template组件中访问已解析的数据

const state = this.props.location.state

这是API documentation

的链接

答案 7 :(得分:2)

如果您需要传递URL参数

泰勒·麦金尼斯(Tyler McGinnis)在他的网站Link to the post

上发表了精彩的帖子解释

下面是代码示例:

  1. history.push组件上的

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

  2. 在路由器组件上的
  3. 上定义路由:

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

  4. “主页”组件上的

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

答案 8 :(得分:1)

不需要与Router一起使用。这对我有用:

在您的父页面中,

<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方法。

答案 9 :(得分:1)

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

答案 10 :(得分:1)

要使用 React 16.8 (withHooks) 函数式组件,你可以这样使用
我们将电话号码发送到下一页
登录.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>
    )

答案 11 :(得分:0)

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

答案 12 :(得分:-4)

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

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

有关URLSearchParams的更多信息,请查看此链接 Test Data Builder