Single application appbar to show back button when navigating throughout the application - reactjs

Question

I have my app.js file which looks like this:
class App extends Component {
render() {
const {classes} = this.props;
return (
<React.Fragment>
<AppBar/>
<BrowserRouter>
<Route render={({location}) => (
<TransitionGroup>
<CSSTransition
key={location.key}
timeout={100}
classNames="someanimation"
>
<Switch location={location}>
<Route exact path="/" component={HomePage} />
<Route exact path="/contact" component={ContactPage} />
<Route exact path="/customer/:id" component={CustomerPage} />
<Route component={ErrorPage} />
</Switch>
</CSSTransition>
</TransitionGroup>
)} />
</BrowserRouter>
</React.Fragment>
);
}
}
This component has an appbar and a router with routes underneath. The point of the appbar being here is that the application then only has one appbar at all times throughout the application. Only the pages underneath change.
Inside my contact page I have a button that goes to a custom page with a param passed:
<Button component={Link} to={'/customer/' + customerID[99]}>
When the application goes to this customer page I want the appbar to show a back button. So I have to somehow notify the appbar to show this button and then also know which page to go back to (it should be the last page). I have googled some examples but I can't find one that fits this case.

Answer 1

React router contains withRouter higher-order component that can provide relevant props to application bar component.
React router is powered by history.js library which is an abstraction over browser history API. While it can be used to navigate over browser history with history.goBack(), it won't work well with navigating over application alone because window history may contain other websites.
The component can look like this (a demo) and should be a child of router component to get router props:
#withRouter
class AppBar extends Component {
state = {
locations: [this.props.location]
};
componentDidMount() {
this.props.history.listen((location, action) => {
if (action === 'REPLACE')
return;
this.setState({
locations: [location, ...this.state.locations]
})
});
}
back = () => {
const [location, ...locations] = this.state.locations;
this.setState({ locations });
this.props.history.replace(location);
}
render() {
return (
<>
{this.state.locations.length > 1 && <button onClick={this.back}>Back</button>}
</>
);
}
}
It keeps track on location changes and navigates through them. It would be more complex task to keep it in sync with browser history navigation buttons (back and forward).