Gatsby+@reach/router中Auth组件意外渲染Header的问题求助

你的问题根源很清晰：Layout组件是无条件渲染的，和路由匹配无关。

看你的代码结构：

<> 
  <Router basepath="/video"> 
    <Auth path="/assessment/:keyId" /> 
  </Router> 
  <Layout> 
    <Router basepath="/video"> 
      {/* 其他路由 */} 
    </Router> 
  </Layout> 
</>

这里的<Layout>和第一个<Router>是同级元素，意味着不管当前访问的是哪个路由，Layout都会被渲染——包括你访问/video/assessment/:keyId的时候。而Layout里包含<Header />，所以Auth页面自然会出现Header。

你误以为只有Layout内部的路由才会触发Layout渲染，但实际上Layout是直接放在顶级Fragment里的，没有任何路由条件判断，所以它会一直存在于页面中。

修复方案 #

我们需要把所有路由整合到一个<Router>中，利用@reach/router的嵌套路由特性，让Layout只在匹配特定路由时才渲染：

1. 重构路由结构

import { Router } from "@reach/router";

// 顶级路由容器
<Router basepath="/video">
  {/* 不需要Layout的路由：直接渲染Auth */}
  <Auth path="/assessment/:keyId" />

  {/* 需要Layout的路由：用Layout作为父路由 */}
  <Layout path="/">
    <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} />
  </Layout>
</Router>

2. 确保Layout兼容嵌套路由

你的Layout组件不需要大改，只要正常接收children即可（@reach/router会自动把匹配到的子路由组件传给父路由的children）：

const Layout = ({ children }) => (
  <> 
    <Header /> 
    {children} 
  </>
);

额外提示 #

尽量避免使用多个同级的<Router>组件，因为@reach/router中多个Router会同时处理路由匹配，很容易引发意外的渲染行为。把所有路由放在一个Router容器中管理是更规范的做法。

内容的提问来源于stack exchange，提问作者MMJ