Page is not rendering after history.push('/path')

Hi,

I have a problem using history v. 5 with react-router-dom. When I call function history.push(‘/cart’) it sends me to the correct page, but it doesn’t show the content.

If I use history version: “4.10.1”, it works perfectly.

Am I doing something wrong ?

This is my history.js file

import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
export default history;

And this is my app.js

import React from 'react';
// import { Router } from 'react-router-dom';
import { Router } from 'react-router';
import { Provider } from 'react-redux';
import { ToastContainer } from 'react-toastify';
import store from './store/index';
import history from './services/history';

import Routes from './routes';
import GlobalStyle from './styles/global';
import Header from './components/Header';

function App() {
	return (
		<Provider store={store}>
			<Router history={history} >
				<Header />
				<Routes />
				<GlobalStyle />
				<ToastContainer autoClose={3000} />
			</Router>
		</Provider>
	);
}

export default App;

[ritch]

I’m running into the same. Here’s a self contained example: https://codesandbox.io/embed/crazy-dirac-04nil?fontsize=14&hidenavigation=1&theme=dark

import React from 'react'
import {Router} from 'react-router'
import {Route} from 'react-router-dom'
import {createBrowserHistory} from 'history'

const myHistory = createBrowserHistory()

export default function App() {
  return (
    <Router history={myHistory}>
      <Route
        path="/"
        exact={true}
        render={() => <h1 onClick={() => myHistory.push('/todos')}>Home</h1>}
      />
      <Route path="/todos" exact={true} render={() => <h1>Todos</h1>} />
    </Router>
  )
}

Downgrading this example to history@4.10.1 fixes the issue.

[mattfrancis888]

I have the same

I’m running into the same. Here’s a self contained example: https://codesandbox.io/embed/crazy-dirac-04nil?fontsize=14&hidenavigation=1&theme=dark

import React from 'react'
import {Router} from 'react-router'
import {Route} from 'react-router-dom'
import {createBrowserHistory} from 'history'

const myHistory = createBrowserHistory()

export default function App() {
  return (
    <Router history={myHistory}>
      <Route
        path="/"
        exact={true}
        render={() => <h1 onClick={() => myHistory.push('/todos')}>Home</h1>}
      />
      <Route path="/todos" exact={true} render={() => <h1>Todos</h1>} />
    </Router>
  )
}

Downgrading this example to history@4.10.1 fixes the issue.

You made my entire day 😃