BrowserRouter之react-router刷新后报错

720 阅读1分钟

泥马报错啊 f5刷新

  • 显示 404 Cannot GET/find 用 BrowserRouter 的话
  • 结果一刷新就报错了,各种get不到页面….

s1.jpg

方法一:

  • 但是用 hashHistory 替换 BrowserRouter 即使你把 F5 按爆,也不会报404错误

方法二:

  • history 模式下,网站刷新会404 ,webpack.config.js 配置 outputpublicPathdevServerhistoryApiFallback
  • 上线服务器 Nginx 部署 history 模式 404,到时再说了
// publicPath是非常有必要配置的,他是项目中引入静态资源(js、css)时的基础路径
// 在使用html-webpack-plugin插件打包后的html文件,可以看到
// 引入js文件的路径为“publicPath+静态资源“
// 这里publicPath应该写“以根目录的方式表示的路径,如:/dist/”或者是绝对路径,不应该是相对路径
output: {
   publicPath: "/"   // history会返回真实的路径 当你使用按需加载的时候,默认为相对路径则会出现404
},
// historyApiFallback是开发中一个非常常见的属性,
// 它主要的作用是**解决SPA页面在history路由模式下,进行路由跳转之后,进行页面刷新 时,
// 返回404的错误** 因为在SPA中的路由是前端路由,直接刷新的时候,后台是不存在对应路由的,因此会报404错误
devServer: {
   historyApiFallback: true   // 解决路由 history 404 问题
},

参考文献:blog.csdn.net/weixin_3916…
参考文献:blog.csdn.net/biao_feng/a…


结语

前端react QQ群:788023830 ---- React/Redux - 地下老英雄

前端交流 QQ群:249620372 ---- FRONT-END-JS前端

(我们的宗旨是,为了加班,为了秃顶……,仰望大佬),希望小伙伴们加群一起学习