React Router通配符路由跳转时短暂显示NotFound组件问题求助

问题描述 #

配置了path="*"的通配符路由用于处理无效路径，但从/profile/:id跳转至/profile再返回时，会短暂显示NotFound组件。相关代码如下：

<Router>
  <Routes>
    <Route path="/" element={[<Navigation key={0}/>, <Home key={1} />]} />
    <Route
      path="/AboutUs"
      element={[<Navigation key={0} />, <AboutUs key={1} />]}
      key={0}
    />
    <Route
      exact
      path="/Profile/:id"
      element={[<Navigation key={0}/>, <Profile key={1} />]}
    />
    <Route
      path="/Profile"
      element={[<Navigation key={0} />, <Profile key={1} />]}
    />
    <Route path="*" element={[<NotFound />]} /> 
  </Routes>
</Router>

问题原因 #

1. React Router v6 兼容性问题：v6版本已移除exact属性，Routes组件默认按顺序进行精确匹配，多余的exact会干扰匹配逻辑。
2. 组件渲染格式错误：将路由element设为数组的写法不符合规范，可能导致组件挂载/卸载时机异常，触发不必要的路由匹配降级。
3. 组件复用逻辑问题：/Profile和/Profile/:id复用同一个Profile组件，但未正确处理路由参数变化，可能导致组件在参数切换时短暂卸载，使得路由匹配短暂 fallback 到*。

解决方案 #

1. 移除无效的exact属性 #

<Route
  path="/Profile/:id"
  element={<>
    <Navigation />
    <Profile />
  </>}
/>

2. 修正element的渲染格式 #

使用React Fragment（<></>）包裹组件，替代数组形式，确保组件渲染逻辑符合规范：

<Route path="/" element={<>
  <Navigation />
  <Home />
</>} />

<Route path="/AboutUs" element={<>
  <Navigation />
  <AboutUs />
</>} />

<Route path="/Profile/:id" element={<>
  <Navigation />
  <Profile />
</>} />

<Route path="/Profile" element={<>
  <Navigation />
  <Profile />
</>} />

<Route path="*" element={<NotFound />} />

3. 确保Profile组件正确响应路由参数变化 #

在Profile组件中使用useParams监听参数变化，避免组件卸载重新挂载：

import { useParams } from 'react-router-dom';

function Profile() {
  const { id } = useParams();

  // 根据id是否存在处理不同页面逻辑
  return (
    <div>
      {id ? <p>用户详情：{id}</p> : <p>个人主页</p>}
    </div>
  );
}

4. 检查Navigation组件的渲染逻辑 #

确保Navigation组件没有延迟渲染或状态更新导致的路由切换阻塞，避免在路由跳转过程中出现空白或错误组件显示。

验证调整 #

修改后，路由匹配逻辑会更稳定，从/profile/:id跳转至/profile再返回时，不会再短暂触发NotFound组件的渲染。

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