如何使用 react-router 4.0 刷新当前路由？不重新加载整个页面

IT技术 reactjs react-router react-router-v4
2021-04-06 03:51:02

'react-router-dom'这里有刷新功能，但我不知道如何调用这个方法，而且他们格式良好的文档也懒得解释这个。

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>
        )
    }
}
6个回答

我通过将新路线推入历史记录，然后用当前路线（或您要刷新的路线）替换该路线来解决此问题。这将触发 react-router 在不刷新整个页面的情况下“重新加载”路由。

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

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

根据react-router 的说法，react 路由器库似乎不支持此功能，并且可能永远不会支持，因此您必须以一种骇人听闻的方式强制刷新。

你可以用这个小技巧。在历史中推送一条新路径，如history.push('/temp')并立即调用history.goBack()

这里的例子：

创建历史并将其传递给路由器：

import { createBrowserHistory } from "history";

export const appHistory = createBrowserHistory();

<Router history={appHistory}>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
</Router>

然后在您的应用程序中的某个地方，更改历史记录：

appHistory.push('/temp');
appHistory.goBack();

通过这种方式，路线将“保持”不变，并会被刷新。

我有同样的问题，我不知道刷新是如何进行的。我的解决方案是执行以下两个步骤。

  1. 推动历史的新路径
  2. 重置所有状态

然后 DOM 将使用您的路线重新渲染。

这就是我实现它的方式：

if (currentUrl == newUrl) {
    props.history.push("/temp");
    props.history.goBack();
}

只有这对我有用：

reloadOrNavigate = () => {
  const { history, location } = this.props;
  if (location.pathname === '/dashboard') {
    history.replace(`/reload`);
    setTimeout(() => {
      history.replace(`/dashboard`);
    });
  } else {
    history.push('/dashboard');
  }
};

答案与前一个相似，但我需要添加setTimeout函数才能使其工作。就我而言，如果我在/dashboard页面上，我必须通过单击徽标来刷新当前 URL 。首先，它转到额外的路线/reload（名称由您决定），然后立即返回。页面在不到一秒的时间内变成白色，并显示重新加载的数据。浏览器中没有重新加载发生，它仍然是 SPA，这很好。

虽然这可能会回答问题，但您应该编辑您的答案以包括您的代码如何回答问题，以便为未来的读者提供上下文。代码块本身对于那些以后可能会遇到相同问题的人来说并不是立即有用的。
2021-06-22 03:51:02
其它你可能感兴趣的问题
上一篇ReactJs：如何在渲染组件时传递初始状态？ 下一篇React bootstrap Navbar：如何右对齐导航栏项目