reactjs - 如何在react-path v4中传递带有history.push / Link / Redirect的params?

如何在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');
          });
IshanGarg asked 2019-08-13T18:21:13Z
4个解决方案
213 votes

首先,你不需要做<Route>'s,因为这在withRouter中指的是回调本身的上下文,因为你使用的箭头函数是指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 }
})

或类似地用于<Route>'s组件或withRouter组件

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

然后在用<Route>'s路由渲染的组件中,可以访问传递过的道具

this.props.location.state.detail

另请注意,使用道具中的历史记录或位置对象时,需要使用<Route>'s连接组件。

根据文件:

withRouter

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

Shubham Khatri answered 2019-08-13T18:23:58Z
0 votes

没有必要使用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方法。

joedotnot answered 2019-08-13T18:24:51Z
0 votes

如果您需要传递URL参数

Tyler McGinnis在他的网站上发表了一篇很棒的帖子解释

这是代码示例:

  1. 在history.push组件上:

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

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

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

  3. 在Home组件上:

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

shyke answered 2019-08-13T18:26:07Z
-3 votes

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

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

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

kamal pandey answered 2019-08-13T18:26:40Z
translate from https://stackoverflow.com:/questions/44121069/how-to-pass-params-with-history-push-link-redirect-in-react-router-v4