Question

在我的App.js文件中，Switch内包含一些路由。根据路线渲染组件。但是，无论路线如何，总有一些组件会被渲染（下面的wrapper和<Sidebar />）。

// app.js
...
<Router>
  <Switch>
    <div class="wrapper">
      <Sidebar />
      <Route exact path="/" component={Home} />
      <Route exact path="/about" component={About} />
    </div>
      <Route component={NotFound} />
  </Switch>
</Router>
...

问题在于，NotFound和wrapper元素在所有路径上都是全局的，因此未呈现<Sidebar />组件。我有几个问题，

如何在保持NotFound和wrapper全局的同时正确显示无效路径上的<Sidebar />组件？
保持wrapper和<Sidebar />全局为反模式吗？如果是这样，如何在路线中呈现全局组件？

Answer 1

正如<Switch/>组件的documentation所说，

a的所有子元素应为或元素。将仅显示与当前位置匹配的第一个孩子。

还要查看<Switch>的{{3}}，可以清楚地看到它遍历所有子代，搜索path道具并将其匹配到当前位置。因此，如果<Switch>的某些子项不是或，则会出现意外行为。

为解决您的任务，我建议使用HOC包装Home和About组件，这将呈现其他必需的组件。例如

export function WithSidebar(props) {
    return <div class="wrapper">
        <Sidebar />
        {props.render()}
    </div>
}

并在Route中使用它，如

<Router>
  <Switch>
      <Route exact path="/" render={() => (<WithSidebar render={() => <Home />} />)} />
      <Route exact path="/about" render={() => (<WithSidebar render={() => <About />} />)} />
      <Route component={NotFound} />
  </Switch>
</Router>

NotFound组件未在路由器中呈现

1 个答案: