React路由/comments正常获取JSON /video/:watchId返回HTML报错

问题原因 #

你遇到的报错是相对路径请求资源的基准地址随当前页面路由变化导致的，具体逻辑如下：

• 在/comments路由下时，你写的fetch('data/topComments.json')是相对路径，会以当前站点根路径为基准拼接，最终请求地址为{你的站点域名}/data/topComments.json，正好命中你存放在public目录下的json文件，请求正常。
• 在/video/:watchId路由下时，相对路径会以/video/为基准拼接，最终请求地址变为{你的站点域名}/video/data/topComments.json，这个路径不存在，单页应用的路由 fallback 机制会自动返回index.html的HTML内容，你尝试把HTML内容解析为JSON就会抛出Unexpected token < in JSON at position 0的错误。

你可以打开浏览器控制台的网络面板查看两次请求的实际地址，就能直接验证这个结论。

解决方案 #

只需要修改commentsApi.js里的fetch请求路径，把相对路径改为站点根绝对路径（路径开头加斜杠/）即可：

export const getTopComments = (videoId) => {
    // 开头加/，强制从站点根目录请求资源
    return fetch('/data/topComments.json')
    .then( response => response.json());
}

export const getReplies = (parent) => {
    return fetch('/data/commentReplies.json')
    .then( response => response.json());
}

修改后不管你在哪一级路由下，请求的json文件地址都是固定的根目录下的路径，不会再出现路径拼接错误的问题。

内容的提问来源于stack exchange，提问作者Conor James Thomas Warford Hen