如何部署根URL为/movies的React应用？解决404与空白页问题

一、修复路由配置错误 #

你的路由结构和basename配置冲突了：basename: '/movies'已经把整个应用的根路径设为/movies，但路由规则里又在子路径写了/movies，导致实际路径变成/movies/movies，自然访问不到。

修改后的路由配置二选一即可：

方案1：扁平路由结构 #

const router = createBrowserRouter(
  [
    {
      path: '/', // 对应实际访问路径 /movies
      element: <MoviesList />,
    },
    {
      path: '/:id', // 对应实际访问路径 /movies/:id
      element: <MovieDetail />,
    },
  ],
  { basename: '/movies' }
);

方案2：嵌套路由结构（保留父路由） #

const router = createBrowserRouter(
  [
    {
      path: '/',
      children: [
        {
          index: true, // 父路由默认匹配，对应 /movies
          element: <MoviesList />,
        },
        {
          path: ':id', // 相对路径，对应 /movies/:id
          element: <MovieDetail />,
        },
      ],
    },
  ],
  { basename: '/movies' }
);

二、Netlify部署配置 #

Netlify默认不识别SPA路由，需要添加重写规则让所有请求指向index.html：

• 在项目public目录下创建_redirects文件（无后缀），内容：

/*    /index.html   200

• 或者创建netlify.toml文件放在项目根目录，内容：

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

重新build后部署，Netlify会自动读取配置处理路由跳转。

三、GitHub Pages部署配置 #

1. 配置项目主页路径 #

在package.json中添加homepage字段，值为你的GitHub Pages访问路径：

// 示例：如果仓库是username/movies-app，访问路径是https://username.github.io/movies-app/movies
"homepage": "https://username.github.io/movies-app/movies"
// 如果是个人站点（username.github.io），则写"/movies"

2. 处理路由404问题 #

GitHub Pages不支持路由重写，需要复制build目录下的index.html，重命名为404.html，再一起部署。这样当访问/movies或/movies/:id时，即使GitHub Pages返回404，也会加载404.html，让React Router接管路由逻辑。

3. 部署命令 #

确保package.json中有部署脚本：

"scripts": {
  "deploy": "gh-pages -d build"
}

执行npm run deploy完成部署。

四、验证 #

重新执行npm run build，部署到对应平台后，测试访问/movies和/movies/:id路径，确认页面正常加载、路由跳转正常。

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