Removing BrowserRouter Causes Page Rerenders

[m-sterspace]

My tree looks roughly like:

<Provider>
  <ConnectedRouter>
    <BrowserRouter>
      <Switch>
        <Route path="profile-page" component={ProfilePage} />
        ...
      <Switch>
    <BrowserRouter>
  <ConnectedRouter>
</Provider>

and my profile page looks something like :

props => (
     <Header/>
     <CurrentProfile />
)

and my CurrentProfile component looks something like:

props => {
  const {profiles} = useSelector(profileListSelector);
  const {location} = useSelector(locationSelector);
  let currentProfile= null;
  if(profiles[location.query.id]){
    currentProfile = profiles[location.query.id];
  } 
   return (
  <h1>{currentProfile.name}</h1>
  )
}

So relatively simple, I've got a bunch of pages, but pages are just display / layout components and don't interact with redux at all. On the page is a currentprofile component that displays the current profile that it gets from redux. Therefore when I change the current profile, I do not need to rerender the page component, just the current profile component.

This works as expected with my current setup, however, I noticed that if I leave the BrowserRouter in my tree, the @@router/LOCATION_CHANGED event doesn't fire from normal react-router-dom links and the documentation says to remove it.

However, when I remove the BrowserRouter from my tree, it's causing my page component to rerender whenever I change any portion of the URL, including query params that come after that page's route.

i.e. if I call push('/profile-page/?id=14') and then push('/profile-page/?id=21') I don't expect the page to rerender since the page itself is only dependent on the first portion of the url, and it hasn't changed. This is how it behaves with a BrowserRouter in my tree; the Profile Page component will not rerender. However, once I remove BrowserRouter and just have ConnectedRouter, it will rerender the full page whenever the URL changes, even if it's just the query param that's changing.

How do I implement the memoizing route behaviour of BrowserRouter with ConnectedRouter?

[tianleiyiji123]

I had the same problem. I found that in BrowserRouter there was a prop called forceRefresh, and when I set true, it forced a refresh.However, there is no similar API available in ConnectedRouter

[Miloshinjo]

Push action is always being called for some reason when clicking on link and it's being added to history, even if it's exactly the same route (with params). Any solution to this?