React Router手动输入多层子路由URL失效 点击链接访问正常

这个问题和React Router路由配置无关，核心是静态资源使用了相对路径引用，直接看控制台报错就能定位：访问两层路由/level1/level2时，浏览器请求的bundle路径是/level1/bundle.js，但你的打包产物bundle.js实际存放在站点根目录，自然返回404。
之所以点击导航跳转不报错，是因为React Router是客户端路由，跳转时不会触发整页刷新，浏览器不会重新请求HTML和静态资源；只有手动输入URL、刷新页面时，浏览器会先请求当前地址对应的HTML，再解析HTML里的资源标签，这时候相对路径就会按照当前URL的目录层级解析，两层路由下就会跑到子目录里找资源，必然找不到。
你之前访问根路径/、一层路径/help没出问题只是巧合：根路径下解析./bundle.js刚好命中根目录资源，一层路径如果没有触发整页资源重载就不会暴露问题，本质是埋了隐患。
另外你webpack devServer里已经开了historyApiFallback: true，这部分配置是对的，作用是让服务端收到任意路由请求都返回根目录index.html交给前端路由处理，不用调整。

两处修改就能彻底解决：

1. 修改index.html里的脚本引用路径，把相对路径改成根目录绝对路径

   <!-- 原错误写法 -->
   <script src="./bundle.js"></script>
   <!-- 替换为 -->
   <script src="/bundle.js"></script>
   

2. 在webpack配置的output段增加publicPath配置，明确所有静态资源的引用前缀为站点根目录，避免后续加图片、拆分包、引入字体等静态资源时再出现同类路径问题：

   // webpack.config.js
   output: {
     path: path.join(__dirname, 'public'),
     filename: 'bundle.js',
     publicPath: '/' // 新增这行
   },
   

改完之后重启webpack-dev-server，再手动输入多层路由地址、刷新页面就可以正常访问了。

注：你贴出的AppRouter.js、Header.js代码里有&n的多余字符，属于粘贴笔误，如果本地运行报语法错误删掉即可，和本次路由问题无关。

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