多页React应用Webpack-dev-server访问/movies路由时组件不渲染且JSON报错

这个Unexpected token < in JSON at position 0错误我太熟了——本质是你的代码把HTML内容当成JSON来解析了，大概率是webpack-dev-server的路由映射没配置对，导致访问/movies时返回的不是你预期的资源，而是HTML页面（比如根目录的index.html或者404页面）。下面是具体的排查和解决步骤：

1. 配置devServer的historyApiFallback规则 #

多页应用的路由需要让devServer明确不同路径对应哪个HTML文件，不然它会默认返回根页面。在你的webpack.config.js里添加如下配置：

module.exports = {
  // 其他已有配置...
  devServer: {
    hot: true,
    inline: true,
    port: 3000,
    historyApiFallback: {
      rewrites: [
        // 匹配/movies路径，返回对应的movies.html
        { from: /^\/movies$/, to: '/movies.html' },
        // 根路径返回主页面
        { from: /^\/$/, to: '/index.html' }
        // 其他页面路由同理添加对应规则
      ]
    }
  }
};

如果你的多页结构比较简单，也可以直接设置historyApiFallback: true，但精准的rewrite规则能避免不必要的路径冲突。

2. 检查Webpack的入口与输出配置 #

多页应用要确保每个页面都有独立的入口和打包文件，别共用一个bundle.js——你现在报错的bundle.js可能是主页面的打包文件，在/movies页面加载它会导致逻辑混乱，进而错误解析HTML为JSON。示例配置如下：

const path = require('path');

module.exports = {
  entry: {
    main: './src/index.js', // 主页面入口文件
    movies: './src/movies.js' // movies页面入口文件
  },
  output: {
    filename: '[name].bundle.js', // 输出main.bundle.js和movies.bundle.js
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/' // 确保所有资源从根路径加载，避免路由层级导致的路径错误
  },
  // 其他loader、plugin配置...
};

同时要在movies.html里引入movies.bundle.js，而不是主页面的bundle.js。

3. 修正API请求的路径 #

检查你movies组件里的JSON请求代码，别用相对路径！比如你要请求public/data/movies.json，必须写绝对路径/data/movies.json——如果写./movies.json，在/movies路由下会被解析成/movies/movies.json，这个路径不存在的话，devServer就会返回HTML，直接触发解析错误。

4. 快速排查小技巧 #

打开浏览器开发者工具的Network面板，刷新/movies页面：

• 如果bundle.js（或movies页面的打包文件）返回的是带<html>标签的HTML，那就是路由映射的问题；
• 如果是某个JSON请求返回了HTML，那就是请求路径写错了。

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