0

So, I have observed one interesting thing when I uses the <BrowserRouter> wrapper inside my App structure. It does not fires location change (@@router/LOCATION_CHANGE) action dispatch on each location change and does not update location props in router object inside Redux store, only fires on initial mount instead.

So there is how my App structure looks like:

import React from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router';

const AppContainer = ({ store, history }) => {
  return (
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <BrowserRouter> // that is one is blocking action location dispatch
          <AppLayout>
              <Switch location={location}>
                <Route exact path='/' component={HelloWorld} />
                <Route path='/next' component={StartCoding} />
              </Switch>
          </AppLayout>
        </BrowserRouter>
      </ConnectedRouter>
    </Provider>
  );
};

And interesting thing is, that if I fully remove the wrapper <BrowserRouter> from app structure the action dispatch @@router/LOCATION_CHANGE fires normally...

Any one know what is this magic is and is it bad to remove it or not?

Max Travis
  • 1,228
  • 4
  • 18
  • 41

1 Answers1

0

Not sure about the "magic" involved, but I recommend that you use <Router> instead of <BrowserRouter> based on what is stated in the react-router API, which reads: "The most common use-case for using the low-level <Router> is to synchronize a custom history with a state management lib like Redux or Mobx." Here's the link. if you want to read more.

legend12
  • 295
  • 5
  • 11
  • Hey, thank you for response. Btw you should know that `` has replace the `Router` since react-router v4. So, it does not make sense... – Max Travis Nov 27 '18 at 09:26