Authenticated routes with React and PassportJS - node.js

Question

I am using the following stack :
React
React router v4
PassportJS
NodeJS backend with Express and
Express session
I have successfully setup PassportJS based login and registration authentication. All pages in my app are protected routes - they can only be viewed by a logged in user.
So, my question is, for each route, how do I check if the user is currently logged in or not. I understand that express session provides server-side session management, but I'm wondering if there's a way to avoid making an API request to the backend on each page load to verify if the session of the current user exists.
My App.js file:
import React, { Component } from 'react';
import './App.css';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
import AsyncAuthPage from 'components/AsyncAuthPage/index.js'
const NoMatch = () => (
<p>Path not found</p>
);
const HomePage = () => (
<div>WELCOME!</div>
);
class App extends Component {
render() {
return (
<div className="App ">
<BrowserRouter>
<Switch>
<Route path="/login" component = {AsyncAuthPage} />
<Route path="/home" component = {HomePage} />
<Route path="*" component={NoMatch} />
</Switch>
</BrowserRouter>
</div>
);
}
}
export default App;
The AsyncAuthPage component implements PassportJS based authentication. In the above sample, I would like to protect Homepage route with authentication. How can this be done? After a user has successfully logged in, the following needs to be taken care of :
The parent App.js needs to know that login was successful
All pages should try to avoid making an API call to the backend (on
componentDidMount or page load) as much as possible, to verify if current user is logged in.
Should work on page reload too