reactjs - 反应布局组件在反应路由器中渲染特定路由

Question

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

<>
  <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/>. 我做错了什么？有什么解决办法吗？