已连接的路由器 - 新路由的页面包含其他数据

Question

我有以下 index.jsx 的文件结构，其中 AppContainer 组件由页眉、props.children 和页脚组成。 AppContainer 是 Connected Router Component 的子组件。在新页面打开的路径中定义了一个组件 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>

已连接的路由器 - 新路由的页面包含其他数据

Connected Router - newly routed page contains additional data

reactjs

react-router

react-router-redux