已连接路由器 - 新路由的页面包含附加数据

Question

我有以下 index.jsx 的文件结构，其中 AppContainer 组件由 Header、props.children 和 footer 组成。 AppContainer 是 Connected Router 组件的子组件。在新页面上打开的路由中定义了一个组件 BookReader。我只想加载该组件的数据，而不是连同它一起加载页眉和页脚。

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>
   )}
  }

有没有办法单独定义 BookReader 的路由，这样 BookReader 应该只加载对应的数据而不是附加数据？

Answer 1

选项 1

将AppContainer 移动到 switch 内部并有一个简单的嵌套路由。

Working demo（选项 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>

选项 2

将AppContainer 渲染为路由。在AppContainer 里面做所有的路线。

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