history.push not working

Created on 24 Nov 2019  路  1Comment  路  Source: ReactTraining/history

I am using version 4.10.1 of the history package which is not working correctly.

I have the following configuration:

// use redux
// file user.actions.js
```javascript
import { createBrowserHistory } from 'history'

const history = createBrowserHistory()

export const login = () => dispatch => {
history.push('/home')
}
````

What is expected is that when running history.push ('/ home'), load the new route into the url and redo the corresponding component in the browser.

How are you behaving?

The path is added in the browser url, BUT the component is NOT changing.

Example in live codesandbox
https://codesandbox.io/s/mutable-bush-22kru?fontsize=14&hidenavigation=1&theme=dark

Most helpful comment

I will close the bug since I managed to solve the problem with history.push.

The solution?

The <BrowserRouter> must be changed to the <Router> component of react-router-dom, anas Router must not be used, but the native component.

```javascript
// file inde.jsx
import { Router } from 'react-router-dom'
import history from './utils/history'

ReactDOM.render(

,
document.getElementById('root'),
)

// file user.actions.js
import history from '../../../utils/history'

export const login = () => dispatch => {
history.push('/home')
}

// file history.js
import { createBrowserHistory } from 'history'

const history = createBrowserHistory()

export default history
````

>All comments

I will close the bug since I managed to solve the problem with history.push.

The solution?

The <BrowserRouter> must be changed to the <Router> component of react-router-dom, anas Router must not be used, but the native component.

```javascript
// file inde.jsx
import { Router } from 'react-router-dom'
import history from './utils/history'

ReactDOM.render(

,
document.getElementById('root'),
)

// file user.actions.js
import history from '../../../utils/history'

export const login = () => dispatch => {
history.push('/home')
}

// file history.js
import { createBrowserHistory } from 'history'

const history = createBrowserHistory()

export default history
````

Was this page helpful?
0 / 5 - 0 ratings

Related issues

vchibilisco-convey picture vchibilisco-convey  路  3Comments

Carduelis picture Carduelis  路  6Comments

vlzuiev picture vlzuiev  路  4Comments

kirill-konshin picture kirill-konshin  路  7Comments

mereskin-zz picture mereskin-zz  路  4Comments