salvoravida/redux-first-history

Cannot read properties of undefined (reading 'pathname'). problem when I click other Link from the page

JavierBeni opened this issue ยท 8 comments

Hello.

I am using this library, and I have problem with it.
I am using it with react-route v6.
the version of this library is 5.0.8
I have same config than in the example, but when I change between webpages, i see this:
Screen Shot 2022-03-01 at 15 40 31

my store is:

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import createSagaMiddleware from 'redux-saga';
import { createBrowserHistory } from 'history';
import { createReduxHistoryContext } from 'redux-first-history';
import { redesign } from './redesign/redux/reducers';
import { v04 } from './redesign/redux/reducers/v04';
import sagas from './sagas';

const sagaMiddleware = createSagaMiddleware();
const historyApi = createBrowserHistory();

const { createReduxHistory, routerMiddleware, routerReducer } = createReduxHistoryContext({
  history: historyApi,
  savePreviousLocations: 10
});

export const store = createStore(
  combineReducers({
    router: routerReducer,
    redesign,
    v04
  }),
  composeWithDevTools(
    applyMiddleware(sagaMiddleware),
    applyMiddleware(routerMiddleware)
  )
);

sagaMiddleware.run(sagas);
export const history = createReduxHistory(store);

The router is like:

import { history } from './store';
import { HistoryRouter as Router } from 'redux-first-history/rr6';

const App = () => {
  return (
   <Router history={history}>
      ...
   </Router>
  );
}

And inside the routes:

const component = () => {
  ...
  return (
    <Routes>
      <Route path="/" element={<Navigate to="/homepage" replace />} />
      <Route path="homepage" element={<StartPage />} />
      ...
      <Route path="*" element={<NotFound />} />
  );
}

I am think I am skiping something easy and short. but I cannot fin it.
This is happening when I am updating to v6 of react and also this library to last version.
After error, if I reaload the page, page works.
Also, I am looking in the redux, the state of path doesnt change. Before yes.

Thanks for your time.

Kind regards.

@JavierBeni please che you provide a code sandbox demo?

@salvoravida ok, I will try to reproduce it. but its a big project, so I don't know if I would can.

Anyway, did you see this bug before?

No. The most probable thing is that there is a bug in your code, but without a code sandbox it's not possible to help you.

Cannot provide help without a sample code. Please feel free to reopen the issue as you post a code sandbox example.

ok.
I am creating project.
for now, I dont see any problem in the sandbox.
I will continue adding elements of my project and testing

thanks by your time.

Hi.
Finally the problem was the version of the "history" library. It must be bigger than 5.0.0

I write the comment for other people can see it if they have same problem.

Regards and thanks!

fyi @salvoravida

Hi. Finally the problem was the version of the "history" library. It must be bigger than 5.0.0

I write the comment for other people can see it if they have same problem.

Regards and thanks!

fyi @salvoravida

Oh great!.

Generally, you do not have to add the history package, as it is a dep of react-router

react-router v5 install history v4
react-router v6 install history v5

@JavierBeni thanks you saved me.