reactJS logout does not prevent back button from reentering application - reactjs

Question

I have a reactJS application where I provide a bootstrap menu to navigate the application. In my home page, this is the code of the menu that provides the user the link to log out:
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="nav navbar-nav">
<li class="active">Logout</li>
<li className="nav-item">
<a className="nav-link" onClick={this.accountinformation}>Basic Account Information</a>
</li>
</ul>
</div>
When the user clicks on the Logout link, the application will route to preventback. This is the code in preventback.js:
import React from 'react';
class preventback extends React.Component {
componentWillMount() {
location.href="/logout";
}
render() {
return (
<div>
</div>
);
}
}
export default preventback
And this is the code in my logout.js:
import React from 'react';
import '../styles/app.css';
class logout extends React.Component {
render() {
return (
<div className="App">
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#"> </a>
</nav>
<div className="container">
<div className="row">
<div className="col-12 text-center">
<p className="h4">You have been logged out</p>
<br /><br /><br />
<div className="text-center py-4 mt-3">
<button type="button" className="btn btn-primary"
onClick={() => {
location.href = ('/')
}}>
Log In
</button>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default logout
All this code works as expected. When I click on the logout link, I get directed to preventback and then preventback directs me to logout.
My issue is that when I click on the browser back button, the browser takes me from the logout page to my home page. I had anticipated it taking me from the logout page to the preventback page. Then, when the preventback page loads, it would automatically route back to the logout page.
What am I not understanding?
Thanks.