如何在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({
  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.

根据文件：

带路由器

您可以访问历史对象的属性和最近的<Route>'s匹配通过withRouter高阶部件。withRouter每次路由发生变化时，都会重新呈现其组件。<Route>渲染props: { match, location, history }.

Answer 2

如果您需要传递URL参数

泰勒·麦金尼斯在他的网站上做了一个很好的解释，链接到邮政

下面是代码示例：

1. 推组件：

   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 3

你可以用，

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

然后，您可以从/template组件由以下代码组成，

const state = this.props.location.state

以下是链接API文档