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
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
````
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 ofreact-router-dom, anas Routermust 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
````