History.push does not redirect when only the param changes but it changes the url in the browser

Question

I have this route:

   <PrivateRoute path="/profile/:user_id" exact component={GenericProfile} />;

This is the PrivateRoute component:

const PrivateRoute = ({ component: Component, auth, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        auth.isAuthenticated === true ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

PrivateRoute.propTypes = {
  auth: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  auth: state.auth,
});

export default connect(mapStateToProps)(PrivateRoute);

This is how it's used in App.js:

When i am in a profile page and I have a button that redirects to another profile:

    <Button onClick={()=>{
       this.props.history.push("/profile/" + another_user_id)
                   }}>
      Redirect to another profile
    </Button>

The url in the browser changes, but nothing happens.
I don't actually get redirect to the other profile.

NOTE: This seems to be a recurring problem for many developers. None of the proposed solutions worked for me. So I am writing this because I have a doubt my case is a bit different.