react动态路由无法渲染控制台报错，手动输入URL或刷新页面时触发

是否为同类问题 #

是，本质上都属于单页应用客户端路由的服务端适配问题，你的报错差异是因为额外触发了相对路径资源/接口的解析异常。

问题根因 #

单页应用的客户端路由逻辑完全运行在浏览器侧：

• 通过Link组件跳转时，仅通过JS修改地址栏URL、匹配前端路由渲染对应组件，不会发起服务端请求，因此运行正常
• 手动输入地址或刷新页面时，浏览器会先向服务端发起当前URL的请求，若服务端未配置客户端路由的fallback规则，会返回错误页面/首页HTML内容：
  你遇到的Unexpected token < in JSON at position 0错误，就是因为相对路径的API请求/静态资源请求在二级路由下被拼接了路由前缀，服务端返回了HTML内容，尝试将HTML解析为JSON时触发报错。

react-router-dom v6 非eject解决方案 #

方案1：使用HashRouter（最快生效，无需服务端配置） #

v6版本已经移除了hashHistory导出，改为直接使用HashRouter组件包裹你的路由根节点即可：

// 替换原先的BrowserRouter
import { HashRouter, Routes, Route } from 'react-router-dom'

const App = () => {
  return (
    <HashRouter>
      <RouterComponent />
    </HashRouter>
  )
}

该方案会在URL中加入#前缀，所有路由逻辑都在#之后处理，服务端只会收到#之前的根路径请求，不需要额外配置。

方案2：修复路径问题 + 配置服务端fallback（无hash后缀，更美观） #

前端修改（无需eject）

1. 检查package.json中的homepage配置，如果设置为相对路径"homepage": "."，改为你的应用根路径或者直接移除该配置
2. 所有API请求、静态资源引用都使用绝对路径（开头加/），比如把fetch('api/pdf/info')改为fetch('/api/pdf/info')

服务端适配

不同部署环境对应不同配置，都不需要修改前端打包逻辑：

• 本地开发（create-react-app默认已经支持）：如果仍报错，可以在项目根目录新建.env文件，添加BROWSER=none FAST_REFRESH=true，重启开发服务即可
• Nginx部署：在配置文件中添加规则

  location / {
    try_files $uri $uri/ /index.html;
  }
  

• Apache部署：确认.htaccess文件放在网站根目录，内容如下：

  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
  </IfModule>
  

• 云平台部署：Vercel/Netlify等平台都支持新增专属配置文件实现fallback，不需要修改前端代码。

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