Connected Router - newly routed page contains additional data

I have the below file structure for index.jsx wherein AppContainer component consists of Header, props.children, and footer. AppContainer is the child for Connected Router Component. A Component BookReader is defined in the route which opens up on a new page. I want to load only the data of that component and not the header and footer along with it .

index.js

<Provider>
  <ConnectedRouter history={history}>
   <AppContainer>
     <Switch>
       <Route exact path="/" component={Home}/>
       <Route A/>
       <Route B/>
       <Route C/>
       <Route path="/read" component={BookReader}/> // component that opens in a new page
       <Route path="*" component={ErrorPage}/>
     </Switch>
   </AppContainer>
 </ConnectedRouter>
</Provider>

AppConatiner.jsx

class AppContainer extends Component () {
 render(){
   return(
    <div>
     <Header/>
     {props.children}
     <Footer/>
    </div>
   )}
  }

is there a way to define the route for BookReader separately such that BookReader should only load the correspondent data and not the additional data?

Option 1

Move AppContainer inside switch and have a simple nested route.

Working demo (option 1)

<Provider>
  <ConnectedRouter history={history}>
    <Switch>
      <Route path="/read" component={BookReader} />
      <Route path="/">
        <AppContainer>
          <Route A />
          <Route B />
          <Route C />
        </AppContainer>
      </Route>
    </Switch>
  </ConnectedRouter>
</Provider>

Option 2

Render the AppContainer as a Route. Inside AppContainer do all the routes.

     <Router history={history}>
        <Switch>
          <Route path="/read" component={BookReader} />
          <Route path="/" component={AppContainer} />
        </Switch>
      </Router>