如何使用 react-router 4.0 刷新当前路由?不重新加载整个页面 [英] How to use react-router 4.0 to refresh current route? not reload the whole page

问题描述

'react-router-dom' 有刷新功能 这里，但我不知道如何调用这个方法，还有他们的 格式良好的文档 无需解释这一点.

'react-router-dom' has refresh function here, but I don't know how to call this method, also their well formatted document doesn't bother to explain this.

window.location.reload() 对我不起作用，因为它也会清除应用商店.我更改了一些数据，然后需要使用更新的数据重新加载路线.

window.location.reload() doesn't work for me, because it wipes out the app store as well. I changed some data, and then need to reload the route with updated data.

我也读过这个:https://github.com/ReactTraining/react-router/issues/1982https://github.com/ReactTraining/react-router/issues/2243

这个线程正是在讨论我的问题:https://github.com/ReactTraining/react-router/issues/4056

this thread is exactly discussing my question: https://github.com/ReactTraining/react-router/issues/4056

仍然不知道该怎么做.这个基本功能应该不需要太多的努力，但是花费了巨大的努力之后，我无法重新加载当前的路线.

and still clueless how to do it. This basic function should not require too much effort, but after spending huge amount of effort, I can't reload current route.

这是我的代码:

@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 在不刷新整个页面的情况下重新加载"路由.

I solved this by pushing a new route into history, then replacing that route with the current route (or the route you want to refresh). This will trigger react-router to "reload" the route without refreshing the entire page.

if (routesEqual && forceRefresh) {
    router.push({ pathname: "/empty" });
    router.replace({ pathname: "/route-to-refresh" });
}

React 路由器的工作原理是使用您的浏览器历史记录进行导航，而无需重新加载整个页面.如果你强制一条路由进入历史反应路由器将检测到这一点并重新加载路由.替换空路由很重要，这样你的后退按钮在你推入后不会带你到空路由.

React router works by using your browser history to navigate without reloading the entire page. If you force a route into the history react router will detect this and reload the route. It is important to replace the empty route so that your back button does not take you to the empty route after you push it in.

根据 react-router 看起来反应路由器库没有支持此功能，并且可能永远不会支持，因此您必须以一种骇人听闻的方式强制刷新.

According to react-router it looks like the react router library does not support this functionality and probably never will, so you have to force the refresh in a hacky way.

这篇关于如何使用 react-router 4.0 刷新当前路由?不重新加载整个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！