react-router-dom route component requires page reload

Question

When calling history.push('/packages') the url is updated but the component will not mount (render) unless the page is reloaded. If I call createHistory({forceRefresh: true}) or manually reload the page the UI is rendered correctly. How can I configure react-router-dom to load the component without explicitly reloading the page or using forceRefresh?

index.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import store from './store'
import {Provider} from 'react-redux'
import App from './App'

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('app')
);

App.jsx

import React, { Component } from 'react'
import { Switch, Route } from 'react-router-dom'
import PropTypes from 'prop-types'
import { Navbar, PageHeader, Grid, Row, Col } from 'react-bootstrap'
import LoginFormContainer from './components/Login/LoginFormContainer'
import PackageContainer from './components/Package/PackageContainer'

class App extends Component {
  render() {
    return (
      <Grid>
        <Navbar>
          <Navbar.Header>
            <Navbar.Brand><h3>Mythos</h3></Navbar.Brand>
          </Navbar.Header>
        </Navbar>
        <Row className="content">
          <Col xs={12} md={12}>
            <Switch>
              <Route path='/packages' render={() => <PackageContainer />} />
              <Route exact path='/' render={() => <LoginFormContainer />} />
            </Switch>
          </Col>
        </Row>
      </Grid>
    )
  }
}

export default App

loginActions.jsx

import * as types from './actionTypes'
import LoginApi from '../api/loginApi'
import createHistory from 'history/createBrowserHistory'

const history = createHistory()

export function loginUser(user) {
  return function(dispatch) {
    return LoginApi.login(user).then(creds => {
      dispatch(loginUserSuccess(creds));
    }).catch(error => {
      throw(error);
    });
  }
}

export function loginUserSuccess(creds) {
  sessionStorage.setItem('credentials', JSON.stringify(creds.data))
  history.push('/packages')
  return {
    type: types.LOGIN_USER_SUCCESS,
    state: creds.data
  }
}

PackageContainer.jsx

import React, { Component } from 'react'
import {connect} from 'react-redux'
import PropTypes from 'prop-types'
import {loadPackages} from '../../actions/packageActions'
import PackageList from './PackageList'
import ImmutablePropTypes from 'react-immutable-proptypes'
import {Map,fromJS,List} from 'immutable'
import {withRouter} from 'react-router-dom'

class PackageContainer extends Component {
  constructor(props, context) {
    super(props, context);
  }
  componentDidMount() {
    this.props.dispatch(loadPackages());
  }
  render() {
    return (
      <div className="col-lg-12">
        {this.props.results ?
        <PackageList results={this.props.results} /> :
        <h3>No Packages Available</h3>}
      </div>
    );
  }
}

PackageContainer.propTypes = {
  results: ImmutablePropTypes.list.isRequired,
};

const mapStateToProps = (state, ownProps) => {
  return {
    results: !state.getIn(['packages','packages','results']) ? List() : state.getIn(['packages','packages','results'])
  };
}

PackageContainer = withRouter(connect(mapStateToProps)(PackageContainer))

export default PackageContainer

Try `` and remove `withRouter` from your code – FisNaN Mar 22 '18 at 03:01 — FisNaN, Mar 22 '18 at 03:01

score 3 · Accepted Answer · answered Mar 22 '18 at 06:32

I assume, that issue that you are create new instance of history object but BrowserRouter doesn't know about the changes which happens inside of it.

So, you should create history object and export it in the index.jsx and use Router instead of BrowserRouter and pass as history property, so then you can just import it whenever you need.

For example:

index.jsx

import { Router } from 'react-router-dom'
import createHistory from 'history/createBrowserHistory'
...

export const history = createHistory()

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <App />
    </Router>
  </Provider>,
  document.getElementById('app')
);

Then, in loginActions you just import history and use .push method as before.

loginActions.jsx

import * as types from './actionTypes'
import LoginApi from '../api/loginApi'
import { history } from './index'

export function loginUser(user) {
  return function(dispatch) {
    return LoginApi.login(user).then(creds => {
      dispatch(loginUserSuccess(creds));
    }).catch(error => {
      throw(error);
    });
  }
}

export function loginUserSuccess(creds) {
  sessionStorage.setItem('credentials', JSON.stringify(creds.data))
  history.push('/packages')
  return {
    type: types.LOGIN_USER_SUCCESS,
    state: creds.data
  }
}

Hope it will helps.

This works, thanks! So, do I need to use Router instead of BrowserRouter because I'm using redux? — neridaj, Mar 22 '18 at 16:44
@neridaj Not quite. Actually, `BrowserRouter` ignores the history prop, so we should use custom history and pass it to `Router` instead. It's not connected with `Redux` in this case. — Denys Kotsur, Mar 22 '18 at 17:02

score 2 · Answer 2 · answered Mar 15 '20 at 10:52

2

In the App.jsx

<Switch>
     <Route path='/packages' render={(props) => <PackageContainer {...props}/>} />
     <Route exact path='/' render={(props) => <LoginFormContainer {...props}/>} />
 </Switch>

Now both PackageContainer and LoginFormContainer have access to history object

answered Mar 15 '20 at 10:52

Alia

657
7
4

This worked like a charm. – Jovylle Bermudez Nov 27 '20 at 10:08

react-router-dom route component requires page reload

2 Answers2