如何在不刷新 ReactJs 页面的情况下重新加载 URL？答案

【问题标题】：How to reload a URL without refreshing the page in ReactJs?如何在不刷新 ReactJs 页面的情况下重新加载 URL？
【发布时间】：2019-03-02 04:33:55
【问题描述】：

我正在尝试重新加载到同一条路线，而无需刷新页面。对于这种特定情况，使用history.pushState()，但我收到一个错误：

TypeError：history.pushState 不是函数。

这是我的代码：

import React from 'react';
import PropTypes from 'prop-types';
import { Container } from 'kawax-js';
import { Switch, Route } from 'react-router-dom';
import File from './FileContainer';
import Folder from './FolderContainer';
import HomeContainer from './HomeContainer';

class RootContainer extends React.Component {

  static stateToProps = ({ ownProps, select }) => {
   const files = select('files');
   const lastFile =  _.last(files);
   return ({
    lastFile: lastFile || {}
 })
};

  static propTypes = {
   history: PropTypes.object.isRequired
};

  static defaultProps = {
   lastFile: {}
};

render() {
 const { lastFile, history } = this.props;
 if( lastFile === {} || !lastFile.isUploaded
  || lastFile.isUploaded === null) {
  return (
    <Switch>
      <Route exact path="/" component={HomeContainer} />
      <Route exact path="/file/:itemPath/:refHash" component={File} />
      <Route exact path="/:folderName" component ={Folder}/>
    </Switch>
   );
  }
  return history.pushState(null, "/:folderName")
 }
}

export default Container(RootContainer);

有没有更好的方法或者我在这里遗漏了什么？

【问题讨论】：

刷新历史记录的目的是什么？

标签： javascript reactjs routing react-router react-router-dom

【解决方案1】：

请使用此代码 Router.browserHistory.push('/'); 代替 history.pushState(null, "/:folderName")

【讨论】：

但这只会将我重定向到我的主页，我希望它只是重新加载我当前所在的页面。
然后你把你当前的网址放在 / 之后
我试过了，但后来我得到了 RootContainer(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. 我也尝试了 <Redirect to={location} component ={Folder}/> ，但在这种情况下我得到了：You tried to redirect to the same route you're currently on: "/test"
试试这个 location.reload();
之前尝试过 :D 确实刷新了我不想要的页面，我想将其保持为单页，无需刷新任何内容。我真的在这里失去理智......

【解决方案2】：

这样做的可能性很小，目前我最喜欢的方法是在组件属性中使用匿名函数：

<Switch>
  <Route exact path="/" component={()=><HomeContainer/>} />
  <Route exact path="/file/:itemPath/:refHash" component={()=><File/>} />
  <Route exact path="/:folderName" component ={()=><Folder/>}/>
</Switch>

或者，如果您想使用当前的 url 参数进行刷新，您将需要额外的路由（重新加载），并使用路由器堆栈进行一些操作：

reload = ()=>{
 const current = props.location.pathname;
 this.props.history.replace(`/reload`);
    setTimeout(() => {
      this.props.history.replace(current);
    });
}

<Switch>
  <Route path="/reload" component={null} key="reload" />
  <Route exact path="/" component={HomeContainer} />
  <Route exact path="/file/:itemPath/:refHash" component={File} />
  <Route exact path="/:folderName" component ={Folder}/>
</Switch>

<div onCLick={this.reload}>Reload</div>

【讨论】：

【解决方案3】：

您可以通过强制组件重新渲染来获得所需的结果，请查看documentation here。我看到您正在扩展 React.Component，因此您应该能够执行以下操作：

...

constructor() {
    this.reload = this.reload.bind(this);
}

...

reload() {
   this.forceUpdate();
}

...

我知道它不使用history，但不需要其他代码，因为它包含在Component 类中。

【讨论】：