使用createBrowserRouter部署React应用到Heroku后非首页无法访问求助

问题描述 #

使用React Router v6官方推荐的createBrowserRouter配置路由，本地运行一切正常，但部署到Heroku后，除首页外所有页面访问时都会显示Cannot GET /xxx（xxx为对应页面路径）。已尝试添加static.json文件、设置homepage为Heroku应用URL，均未解决问题。

相关代码片段：

index.js #

...
const router = createBrowserRouter([
      {
        path: '/',
        element: <Home />,
        errorElement: <Error />,
        children: [
        ]
      },
      {
        path: 'work-history',
        element: <WorkHistory />
      },
      ...
    ])

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  </React.StrictMode>
);

static.json #

{
  "root": "build/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

解决方法 #

• 确认static.json位置
  确保static.json文件放在项目根目录（与package.json同级），Heroku会读取根目录的该文件配置静态资源路由，放在子目录会导致配置不生效。

• 检查build命令有效性
  确认package.json中的build命令能正确生成build文件夹，例如Create React App的默认命令：

"scripts": {
  "build": "react-scripts build"
}

部署前先在本地执行npm run build，验证build文件夹是否生成了完整的编译产物。

• 移除homepage配置
  如果之前在package.json中设置了"homepage": "https://your-heroku-app-url.herokuapp.com"，建议移除该配置。使用createBrowserRouter时，额外设置homepage反而可能干扰路由匹配逻辑。

• 检查Heroku buildpack
  确保Heroku使用了Node.js buildpack，通过Heroku CLI执行以下命令查看：

heroku buildpacks

若未配置，执行命令添加：

heroku buildpacks:set heroku/nodejs

• 验证路由配置
  确认路由path无拼写错误，work-history作为独立路由对应/work-history路径，配置本身无问题。同时确保errorElement能正常渲染，避免路由错误被掩盖。

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