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

reactjs React.js

村村凯宝儿

2020-03-11

我们如何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');
          });

第609篇《如何在react-router v4中使用history.push / Link / Redirect传递参数?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
西门斯丁 2020.03.11

不需要与路由器一起使用。这对我有用:

在您的父页面中,

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

小宇宙GO 2020.03.11

您可以使用,

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

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

const state = this.props.location.state

阅读更多有关React Session History Management的信息

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android