React Router's v6 history.push('/') giving error of "undefined (reading 'pathname')" - url changes, but page stays the same

Question

I'm trying to change the page in a Redux Thunk action creator to take the user back "home" after they submit a form

The url changes when the action creator is invoked, but the page doesn't change

I can't use BrowserRouter beacuse I'm creating my own instance of history, but whenever I use Router I get the error

TypeError: Cannot read properties of undefined (reading 'pathname')

I tried referencing this which is exactly the same problem I'm having, but it too is unresolved. The only answer given just throws the same error but replaces pathname with createHref

Needless to say I'm extremely grateful to anyone who can get me unstuck

Here's the code:

history.js

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

App.js

import React from 'react'
import { Router, Routes, Route } from 'react-router-dom'
import history from '../history'

import StreamCreate from './streams/StreamCreate'
import StreamDelete from './streams/StreamDelete'
import StreamEdit from './streams/StreamEdit'
import StreamList from './streams/StreamList'
import StreamShow from './streams/StreamShow'

import Header from './Header';

const App = () => {
    return (
        <div className="ui container">
            <Router history={history}>
                <Header />
                <Routes>
                    <Route path="/" exact element={ <StreamList /> } />
                    <Route path="/streams/new" exact element={ <StreamCreate /> } />
                    <Route path="/streams/edit" exact element={ <StreamEdit /> } />
                    <Route path="/streams/delete" exact element={ <StreamDelete /> } />
                    <Route path="/streams/show" exact element={ <StreamShow /> } />
                </Routes>
            </Router>
        </div>
    )
}

export default App

actions

import history from '../history';

export const createStream = (formValues) => async (dispatch, getState) => {
    const { userId } = getState().authReducer // userId from auth
    const { data } = await streams.post('/streams', { ...formValues, userId })

    dispatch({ type: CREATE_STREAM, payload: data })
    history.push("/")
}

Answer 1

You can separate this history responsibility from push to component that dispatch this action. And after dispatch from your component, you can use the hook useNavigate() to navigate to /.

History is not working in react-router v6.

Answer 2

If you happend to migrate to react router 6 then you might need to check their migration guide

React Router v6 introduces a new navigation API that is synonymous with and provides better compatibility with suspense-enabled apps.

You can use useNavigate() hook and then have access to navigate

 let navigate = useNavigate();