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

[alexandre-reis]

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 [email protected] 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 [email protected] fixes the issue.

You made my entire day :)

[tavareshenrique]

I have the same, it only works with me if I downgrade to the [email protected] version, if I upgrade to [email protected], the problem reported here will occur and I don’t know how to fix it to use this new version.

[thomasmi]

I am seeing the same issue with v5 using

<Redirect exact from='/' to='/home' />

when I rolled back to [email protected] it works as expected.

[keyvan-m-sadeghi]

Same problem!

[dominguesgm]

Writing this here to document what I found in more detail, not sure if it is redundant or not. I ran into this issue and tried to do a bit of debugging inside the react-router source.

It seems that with [email protected], the history.push and history.replace methods create a wrapper around the usual location object and store the type of _action_ there.

For example,

context.location = {
  pathname,
  search,
  hash,
  state,
  key,
}

Becomes

context.location = {
  action: 'REPLACE',
  location: {
    pathname,
    search,
    hash,
    state,
    key,
  }
}

(found from logging the context in react-router's Switch implementation to console)

Since the [email protected]'s Switch tries to find pathname in context.location, it won't find it because it's now in context.location.location.

I assume this is being tackled in react-router v6, and I don't know if it makes sense for this stage to update v5 to play nicely with this breaking change on history, but if it does I wouldn't mind taking a shot at it.

[StringEpsilon]

FYI, I posted a more detailed overview of all the breaking changes I could find in #811.

[dominguesgm]

@StringEpsilon Thanks for the list, looks like important info for users. I may be missing something but is the change I mentioned listed there already? In case it isn't, I think it would be a good addition, because it breaks a pretty common use-case.

[StringEpsilon]

It's the history.listen() change. You can see more details on most entries in the gist.

[mayur-novus]

With history 5.x.x, Fails when using

<Router history={history}>
    ...
</Router>

Rendering works nicely when using BrowserRouter.

<BrowserRouter>
    ...
</BrowserRouter>

[StringEpsilon]

@mayur-novus That's because using <BrowserRouter/> will pull in and use history@4, as it's a direct dependency of react-router, unless your bundler swaps that out explicitly.

[ruvaleev]

Writing this here to document what I found in more detail, not sure if it is redundant or not. I ran into this issue and tried to do a bit of debugging inside the react-router source.

It seems that with [email protected], the history.push and history.replace methods create a wrapper around the usual location object and store the type of _action_ there.

For example,

context.location = {
  pathname,
  search,
  hash,
  state,
  key,
}

Becomes

context.location = {
  action: 'REPLACE',
  location: {
    pathname,
    search,
    hash,
    state,
    key,
  }
}

(found from logging the context in react-router's Switch implementation to console)

Since the [email protected]'s Switch tries to find pathname in context.location, it won't find it because it's now in context.location.location.

I assume this is being tackled in react-router v6, and I don't know if it makes sense for this stage to update v5 to play nicely with this breaking change on history, but if it does I wouldn't mind taking a shot at it.

Thank you so much! I was downgrade my 'hisory' from 5.0.0 to 4.1.0 as you mentioned, and now everything works properly )