React/router/memoryrouter - How To Pass History Property And Use Push() In Child Component?

I'm building a React app where I do NOT want the URL in the browser to be updated. I am NOT using 'react-router-dom' but only 'react-router' and MemoryRouter (https://reacttraining

Solution 1:

useHistory is a Hook so it should be used in a functional component, not inside a class based component.

Finally, the accepted answer for this.props.history.push works in some components and not others ends with block of code export default withRouter(connect(mapStateToProps, matchDispatchToProps)(ChildView)); but does not explain where mapStateToProps or matchDispatchToProps comes from?

-If you're not using redux then you can just use

exportdefaultwithRouter(yourComponentName);

update

I've changed the AppLink component to this and it is working fine

importReactfrom"react";
import"./AppLink.css";
import { useHistory } from'react-router';

constAppLink = props => {
  const history = useHistory();
  return (
    <divclassName="app-link-button"onClick={() => history.push(props.url)}
    >
      <span>{props.label}</span></div>
  );
};

exportdefaultAppLink;