'react-router-dom'具有刷新功能here ,但我不知道如何调用这个方法,还有他们的well formatted document懒得解释这个。
window.location.reload() 对我不起作用,因为它也会清除应用程序商店。我更改了一些数据,然后需要使用更新的数据重新加载路线。
我还读过这篇文章: https://github.com/ReactTraining/react-router/issues/1982 https://github.com/ReactTraining/react-router/issues/2243
这个帖子正是在讨论我的问题: https://github.com/ReactTraining/react-router/issues/4056
但仍然不知道如何去做。这个基本功能应该不需要太多的努力,但是花费了巨大的努力之后,我无法重新加载当前的路线。
这是我的代码:
@inject('store') @observer
export default class PasswordInput extends Component {
constructor (props) {
super(props)
this.setPwd = this.setPwd.bind(this)
this.submit = this.submit.bind(this)
}
componentWillMount() {
this.case = this.props.store.case
this.setState({refresh: false})
}
setPwd(e) {
// console.log(e)
this.case.pwd = e.target.value
}
submit() {
console.log(this.props.caseId)
this.setState({refresh: true})
}
render() {
return (
<Container>
<div>{this.state.refresh}</div>
{ (this.state.refresh) && <Redirect refresh={true} to={'/cases/' + this.props.caseId}></Redirect>}
<br />
<Grid columns="three">
<Grid.Row>
<Grid.Column key={2}>
<Form>
<label>Enter Password</label>
<input placeholder="empty" type="text" onChange={this.setPwd} value={this.case.pwd}></input>
<Button name="Save" color="green" size="mini"
style={{marginTop:'1em'}}
onClick={this.submit}>
Submit
</Button>
</Form>
</Grid.Column>
</Grid.Row>
</Grid>
</Container>
)
}
}
最佳答案
我通过将新路线插入历史记录,然后用当前路线(或您想要刷新的路线)替换该路线来解决了这个问题。这将触发react-router“重新加载”路由,而无需刷新整个页面。
if (routesEqual && forceRefresh) {
router.push({ pathname: "/empty" });
router.replace({ pathname: "/route-to-refresh" });
}
React 路由器的工作原理是使用浏览器历史记录进行导航,而无需重新加载整个页面。如果你强制将一条路由写入历史记录, react 路由器将检测到这一点并重新加载该路由。替换空路由很重要,这样您的后退按钮在插入后就不会带您到空路由。
根据react-router看起来 React 路由器库不支持此功能,并且可能永远不会支持,因此您必须以一种 hacky 的方式强制刷新。
关于reactjs - 如何使用react-router 4.0刷新当前路由?不重新加载整个页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47602091/