Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
JavierBeni opened this issue Mar 1, 2022 · 8 comments

Comments

@JavierBeni
Copy link

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.

@salvoravida
Copy link
Owner

@JavierBeni please che you provide a code sandbox demo?

@JavierBeni
Copy link
Author

@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?

@salvoravida
Copy link
Owner

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.

@salvoravida
Copy link
Owner

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

@JavierBeni
Copy link
Author

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.

@JavierBeni
Copy link
Author

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

@salvoravida
Copy link
Owner

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

@filippogallizia
Copy link

@JavierBeni thanks you saved me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants