React Router中NotFound路由先短暂渲染后跳转至Page组件是什么原因

核心原因是你的动态路由依赖异步获取的journals状态，初始渲染阶段动态路由未挂载，导致路径优先匹配到404路由：

• 初始状态下this.state.journals是空数组，你写的条件判断this.state.journals.length !== 0不成立，所有动态生成的Route都不会被渲染，此时<Switch>组件内仅存在path="*"的NotFound路由，访问任意路径都会先命中404。
• journals数据是异步请求获取的（一般在componentDidMount/副作用钩子中发起请求），只有等请求返回、调用setState更新状态后，动态路由才会被挂载到DOM中，React Router此时才会重新匹配路径，渲染对应的Page组件，两者的时间差就是你看到的404先显示数秒的原因。

你可以根据业务场景选择以下任意一种方案修复：

1. 增加加载状态判断
   新增isLoading状态管理数据请求状态，请求未完成时渲染加载占位符，而非直接渲染路由列表，避免初始阶段命中404。示例逻辑：

if (this.state.isLoading) return <Loading />
return (
  <Switch>
    {/* 原有路由逻辑 */}
  </Switch>
)

2. 改用静态动态参数路由（更推荐）
   不需要遍历journals生成多个路由，直接声明带参数的静态路由，在Page组件内根据参数匹配对应journal数据，路由初始就存在，不会出现匹配断层：

<Switch>
  <Route exact path="/journals/:journalId" render={(props) => {
    const journal = this.state.journals.find(item => item._id === props.match.params.journalId)
    return <Page journal={journal} {...props} />
  }} />
  <Route path="*" component={NotFound} />
</Switch>

3. 调整404路由的渲染时机
   等journals加载完成后再渲染404路由，避免初始阶段只有404可匹配：

<Switch>
  {this.state.journals.map(journal => (
    <Route
      key={journal._id}
      exact
      path={this.getJournalLinks(journal)}
      render={(props) => <Page journal={journal} {...props} />}
    />
  ))}
  {/* 只有journals加载完成后才渲染404 */}
  {this.state.journals.length !== 0 && <Route path="*" component={NotFound} />}
</Switch>

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