reactjs – 如何使用react-router 4.0刷新当前路由？不重新加载

发布时间：2020-12-15 20:30:31 所属栏目：百科来源：网络整理

导读：‘react-router-dom’有刷新功能 here,但我不知道如何调用这个方法,他们的 well formatted document也不费心解释这个. window.location.reload()对我不起作用,因为它也会消除应用程序商店.我更改了一些数据,然后需要使用更新的数据重新加载路由. 我也看了这

‘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-router,看起来反应路由器库不支持此功能,可能永远不会,所以你必须以一种hacky方式强制刷新.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!