React布局组件以在React Router中呈现特定路由

Question

我在@reach/router上使用Gatsby，我有这个简单的路由器

<>
  <Router basepath="/video">
    <Auth path="/assessment/:keyId" />
  </Router>

  <Layout>
    <Router basepath="/video">
      <PrivateRoute path="/register/:keyId" component={Register} />
      <PrivateRoute path="/tutorial/:keyId" component={Tutorial} />
      <PrivateRoute path="/test/:keyId" component={Test} />
      <PrivateRoute path="/questions/:keyId" component={Questions} />
      <PrivateRoute path="/complete/:keyId" component={Complete} />
      <PrivateRoute path="/personality/:keyId" component={Personality} />
      <PrivateRoute path="/results/:keyId" component={Results} />
    </Router>
  </Layout>
</>

在Layout组件上，我就这么简单：

<>
  <Header />
  {children}
</>

问题出在<Auth/>组件中。它使用<Header/>进行渲染。为什么？我正在包装要使用<Layout/>进行渲染的特定路线，除了<Auth/>以外的所有东西。我做错了什么？有解决方案吗？