others - ReactJS - 在react-router v4中,如何通过history.push/Link/Redirect传递参数?

如何在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\');


 });



时间:

如果需要传递URL参数

Tyler McGinnis在他的网站上发表了一个伟大的文章,链接到文章

下面是代码例子:

在history.push组件上:

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

在router组件上,你定义了路由:

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

在Home component上:

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

你可以用

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

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

const state = this.props.location.state

这是给你的链接,API文档

不需要与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方法。

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


const queryParams = new URLSearchParams(this.props.location.search);


console.log(\'assuming query param is id\', queryParams.get(\'id\');



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

...