React Router 6+导航至首页先显示About页的问题排查与解决

问题场景 #

我是React新手，正在学习Traversy的速成课程及React Router 6+的额外视频。我的路由代码如下：

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'

return (
  <div className="container">
    <Router>        
      <Header
        title='sikyona'
        onAdd={()=> setShowAddtask(!showAddTask)}
        showAdd={showAddTask}
      />
      <Routes>
        <Route 
          path='/'  
          element={
            <>
              {showAddTask && <AddTask onAdd={addTask} />}
              {tasks.length > 0
                ? <Tasks tasks={tasks} onDelete={deleteTask} />
                :<p>add tasks</p>  
              }
            </>
          } 
        />
        <Route path='/about' element={<About/>} />
      </Routes>
      <Footer />    
    </Router>  
  </div>
);

当导航至首页http://localhost:3000/时，会先短暂显示About页面，之后才显示首页对应的内容。使用的react-router-dom版本为^6.4.1。

可能原因及修复方法 #

原因1：React StrictMode的双重渲染（开发环境） #

React的StrictMode在开发环境下会强制组件进行两次渲染，用来检测潜在问题。这可能导致路由初始化时出现短暂的匹配异常，或者组件状态未及时更新，让你误以为显示了About页面。

修复：
暂时移除根组件外层的<StrictMode>标签测试，生产环境下这个现象会自动消失，不需要永久移除。

原因2：Header组件中的导航链接存在错误 #

如果Header里的Link或NavLink配置有误，比如默认激活了About的链接，或者存在错误跳转逻辑，可能会在页面加载时短暂触发About路由的渲染。

修复：
检查Header组件中的导航代码：

• 确保首页的Link组件to属性为'/'，无拼写错误
• 检查NavLink的激活逻辑，避免错误标记About为激活状态
• 确认没有自动跳转至/about的逻辑（比如Navigate组件）

原因3：路由匹配的竞态或初始状态问题 #

如果首页内容依赖异步获取的状态（比如tasks是接口请求的数据），初始状态下tasks.length为0，首页会显示add tasks文本，可能被误判为About页面；或者路由初始化时状态未同步，导致短暂匹配错误。

修复：

• 给tasks设置初始值为[]，避免初始状态为undefined导致的渲染异常
• 给首页内容添加加载状态，避免空白或简单文本造成误解：

  {tasks === null ? <p>Loading...</p> : (
    tasks.length > 0
      ? <Tasks tasks={tasks} onDelete={deleteTask} />
      : <p>add tasks</p>
  )}
  

• 确保showAddTask初始状态为false，避免首页初始渲染时加载AddTask组件导致布局变化

原因4：浏览器缓存或路由状态残留 #

浏览器可能缓存了之前的路由状态，导致页面加载时短暂显示旧的路由内容。

修复：

• 清除浏览器缓存，或用无痕模式打开页面测试
• 检查是否有本地存储（localStorage/sessionStorage）保存了路由状态，如有则清除相关存储项

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