I am trying to reload onto the same route without having to refresh the page. For this specific case, using history.pushState(), but I'm getting an error:

TypeError: history.pushState is not a function.

Here is my code:

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="/" ponent={HomeContainer} />
      <Route exact path="/file/:itemPath/:refHash" ponent={File} />
      <Route exact path="/:folderName" ponent ={Folder}/>
    </Switch>
   );
  }
  return history.pushState(null, "/:folderName")
 }
}

export default Container(RootContainer);

Is there a better way of doing this or am I missing something here?

I am trying to reload onto the same route without having to refresh the page. For this specific case, using history.pushState(), but I'm getting an error:

TypeError: history.pushState is not a function.

Here is my code:

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="/" ponent={HomeContainer} />
      <Route exact path="/file/:itemPath/:refHash" ponent={File} />
      <Route exact path="/:folderName" ponent ={Folder}/>
    </Switch>
   );
  }
  return history.pushState(null, "/:folderName")
 }
}

export default Container(RootContainer);

Is there a better way of doing this or am I missing something here?

• javascript
• reactjs
• routes
• react-router
• react-router-dom

Share Improve this question Follow edited Sep 26, 2018 at 12:35 Luuklag 3,9141212 gold badges3939 silver badges5959 bronze badges asked Sep 26, 2018 at 11:47 Lovro BilješkovićLovro Bilješković 9511 gold badge11 silver badge99 bronze badges 1

• What is the purpose of doing a refresh through history? – Aditya Chawla Commented Sep 26, 2018 at 11:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

You may get the desired result by forcing the ponent to rerender, take a look at the documentation here. I see you are extending React.Component so you should be able to do the following:

...

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

...

reload() {
   this.forceUpdate();
}

...

I know it does not use history but there will be no other code required as it is included with the Component class.

please use this code Router.browserHistory.push('/'); instaed of history.pushState(null, "/:folderName")

You have few possibilities to do that, currently my favorite way to do that is using anonymous function in ponent prop:

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

Or if you want to refresh with current url params, you'll need extra route (reload), and play a little with router stack:

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

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

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