如何在Reaction-路由器V4中传递与历史相同的参数。推送/链接/重定向？

Question

如何在Reaction-路由器V4中传递与历史相同的参数。推送/链接/重定向？

如何传递参数this.props.history.push('/page')反应-路由器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引用回调本身的上下文，因为您使用的是箭头函数，它引用的是Reaction组件上下文。根据医生的说法：历史对象通常具有以下属性和方法：长度-(数字)历史堆栈中的条目数操作-(字符串)当前操作(推送、替换或弹出)位置-(对象)当前位置。可能具有下列属性：路径名-(字符串)URL的路径搜索-(字符串)URL查询字符串散列-(字符串)URL散列片段状态-(字符串)位置特定的状态，当这个位置被推送到堆栈上时，它被提供给例如Push(path，state)。仅在浏览器和内存历史记录中可用。推动(路径，[状态])-(函数)将一个新条目推到历史堆栈上替换(path，[state])-(函数)替换历史堆栈上的当前条目Go(N)-(函数)通过n个条目移动历史堆栈中的指针GoBack()-(函数)等价于go(-1)GoForward()-(函数)等价于go(1)块(提示)-(函数)阻止导航因此，在导航时，可以将道具传递给历史对象，如this.props.history.push({ &nbsp;&nbsp;pathname:&nbsp;'/template', &nbsp;&nbsp;search:&nbsp;'?query=abc', &nbsp;&nbsp;state:&nbsp;{&nbsp;detail:&nbsp;response.data&nbsp;}})或类似于Link组件或Redirect元件<Link&nbsp;to={{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pathname:&nbsp;'/template', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;search:&nbsp;'?query=abc', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;state:&nbsp;{&nbsp;detail:&nbsp;response.data&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}}>&nbsp;My&nbsp;Link&nbsp;</Link>，然后在用/template路由，您可以访问通过的道具this.props.location.state.detail还请记住，当使用道具中的历史记录或位置对象时，您需要将组件连接到withRouter.根据文件：带路由器您可以访问历史对象的属性和最近的<Route>'s匹配通过withRouter高阶部件。withRouter每次路由发生变化时，都会重新呈现其组件。<Route>渲染props: { match, location, history }.

Answer 2

如果您需要传递URL参数泰勒·麦金尼斯在他的网站上做了一个很好的解释，链接到邮政下面是代码示例：推组件：this.props.history.push(/home:${this.state.userID})在路由器组件上定义路由：<Route path='/home:myKey' component={Home} />关于家庭部分：componentDidMount(){ &nbsp; &nbsp; &nbsp; &nbsp;const { myKey } = this.props.match.params &nbsp; &nbsp; &nbsp; &nbsp;console.log(myKey ) }

Answer 3

你可以用，this.props.history.push("/template", { ...response })或this.props.history.push("/template", { response: response })然后，您可以从/template组件由以下代码组成，const state = this.props.location.state以下是链接API文档