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

Question

我正在尝试重新加载到相同的路线而无需刷新页面。对于这种特定情况，使用 history.pushState()，但出现错误:

TypeError: history.pushState is not a function.

这是我的代码:

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);

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

Answer 1

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

...

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

...

reload() {
   this.forceUpdate();
}

...

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