Question

我具有以下index.jsx的文件结构，其中AppContainer组件由Header，props.children和footer组成。 AppContainer是“连接的路由器组件”的子级。在新页面中打开的路径中定义了组件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并使用简单的嵌套路由。

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>

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

1 个答案: