我们如何在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');
});
我们如何在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');
});
当前回答
Pass
history.push({pathname:"/yourroute",state: {_id: "0001", name: "AZ"}})
Read
import React from 'react';
const YourRoute = props=> {
const { _id, name } = (props.location && props.location.state) || {};
//_id and name will contain the passed data
.
.
.
}
下面是一个工作示例
其他回答
没有必要与throuter一起使用。这对我来说很管用:
在父页面中,
<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方法。
您可以使用location将状态发送到其他组件,就像这样
在源组件中
this.props.history.push(pathComponent, sendState);
pathComponent是接收状态的目标组件
在目标组件中 如果您使用类组件,您可以像这样接收状态
Javascript版本
constructor(props) {
this.state = this.props.location.state
}
打印稿版本
constructor(props: {}) {
const receiveState = this.props.location.state as StateType // you must parse into your state interface or type
this.state = receiveState
}
奖金
如果你想重置收到的状态。使用历史记录替换位置,像这样
this.props.history({pathName: currentPath, state: resetState})
“currentPath”为目标组件路径 resetState是你想要的新值状态
如果你需要传递URL参数
Tyler McGinnis在他的网站上有一个很好的解释,链接到这个帖子
下面是代码示例:
关于历史。将组件: this.props.history.push(“/ home: $ {this.state.userID}”) 在路由器组件上定义路由: <路由路径='/home:myKey'组件={home} /> Home组件:
componentDidMount(){
const { myKey } = this.props.match.params
console.log(myKey )
}
添加信息以获取查询参数。
const queryParams = new URLSearchParams(this.props.location.search);
console.log('assuming query param is id', queryParams.get('id');
有关URLSearchParams的更多信息,请查看此链接 URLSearchParams
For the earlier versions: history.push('/[pathToSomeWhere]', yourData); And get the data in the related component just like below: this.props.location.state // it is equal to yourData For the newer versions the above way works well but there is a new way: history.push({ pathname: '/[pathToSomeWhere]', state: yourData, }); And get the data in the related component just like below: Class Component this.props.location.state; // it is equal to yourData Function Component const location = useLocation(); location.state; // it is equal to yourData
有时需要使用Link或NavLink组件,而不是使用历史记录。推动作用。你可以用下面的like:
<Link
to={{
pathname: '/[pathToSomeWhere]',
state: yourData
}}
>
...
</Link>
提示:状态键名称应在最新版本中使用。