如何解决React路由本地正常、部署后访问抛出TypeError的问题

核心问题定位 #

• 路由匹配规则不匹配：你配置的会话相关路由路径为/session/new，但实际访问的是/session?token=<token>，开发环境的React Router兼容逻辑会忽略部分匹配异常，打包生产后路由匹配逻辑更严格，未命中显式配置的路由后触发兜底的ErrorPage组件渲染，若组件存在调用异常就会抛出TypeError: Object(...) is not a function报错。
• 导入导出规则不规范：开发环境对组件导入的大小写、导出类型（默认导出/命名导出）的容错性更高，生产打包后如果导入语句和组件实际导出规则不匹配，会导致引入的组件为undefined，调用时就会触发该类型报错。
• React Router版本不兼容：如果你的项目依赖是React Router v6，但代码里还用了v5的Switch、Redirect组件语法，开发环境可能因为依赖缓存正常运行，打包生产后就会触发调用报错。
• 静态服务路由回退配置问题：SPA应用使用BrowserRouter时，所有请求必须回退到入口index.html才能让前端路由正常工作，serve -s默认已支持该配置，但S3部署需要手动配置错误文档指向index.html。

修复步骤 #

1. 修正路由配置
   根据你的业务访问需求调整路由规则，如需支持/session路径访问，新增对应路由配置：

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Switch>
        <Route exact path="/">
          <Redirect to="/error" />
        </Route>
        {/* 新增匹配/session路径的路由 */}
        <Route exact path="/session">
          <App />
        </Route>
        <Route path="/session/new">
          <App />
        </Route>
        <Route path="/success">
          <SuccessPage />
        </Route>
        <Route path="/error">
          <ErrorPage />
        </Route>
        <Route path="*">
          <ErrorPage />
        </Route>
      </Switch>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

如果确认使用的是React Router v6版本，需要将语法调整为v6标准写法，替换Switch为Routes、Redirect为Navigate。

2. 校验组件导入导出
   检查所有路由对应组件的导入语句是否和导出规则匹配：

• 默认导出的组件导入时不能加大括号：import ErrorPage from './pages/ErrorPage'
• 命名导出的组件导入时必须加对应大括号：import { ErrorPage } from './pages/ErrorPage'
• 确认导入路径的大小写和实际文件路径完全一致，比如文件名是errorPage.js就不能写ErrorPage.js

3. 配置S3部署规则
   如果部署到S3，进入静态网站托管配置页面，将索引文档和错误文档都设置为index.html，确保所有前端路由请求都能正确返回入口文件。

4. 验证修复效果
   重新执行npm run build打包，再用serve -s build启动服务，访问对应路径确认无报错即可。

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