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

Posted 2023-02-21

【中文标题】已连接路由器 - 新路由的页面包含附加数据

【英文标题】：Connected Router - newly routed page contains additional data

【发布时间】：2020-10-13 11:38:49

【问题描述】：

我有以下 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 应该只加载对应的数据而不是附加数据？

【参考方案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>

【讨论】：

试过了会报错路由器应该只有一个子元素，如果我把它放在一个div中并使用它，由页眉和页脚组成的子元素都会一起加载

是的，它可以工作，但是有两条路线我未能更新，在问题中更新了它，当这些路线特别是 path="*" 时，错误组件也会被加载应用容器加载。

在 AppContainer 中使用了另一个 Switch 块，并且可以正常工作 希望它是正确的 - <Switch> <Route path="/read" component=BookReader/> <AppContainer> <Switch> <Route exact path="/" component=Home/> <Route A/> <Route B/> <Route C/> <Route path="*" component=ErrorPage/> </Switch> </AppContainer> </Switch>

太棒了...很高兴听到这个消息...如果答案有帮助，请考虑投票并接受答案..