React Router's v6 history.push('/') giving error of "undefined (reading 'pa-CodePudding

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("/")
}

CodePudding user response：

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.

CodePudding user response：

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();

CodePudding user response：

react router v6 doesn't support exact and history anymore.

// old - v5 <Route exact path="/" component={Home} />

// new - v6 <Route path="/" element={<Home />} />

const navigate = useNavigate();

CodePudding user response：

Turns out it is still possible to maintain a global history instance so that abstracting programmatic navigation to your action creators is still possible

Happy to see you, unstable_HistoryRouter(:

import { createBrowserHistory } from 'history';
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';

let history = createBrowserHistory();

function App() {
  return (
    <HistoryRouter history={history}>
      // The rest of your app
    </HistoryRouter>
  );
}

history.push("/foo");