react-router BrowserRouter 两行配置解决一刷新就404

配置项

devServer.historyApiFallback = true
output.publicPath = "/"

配置流程

react-router 是 React 项目的路由解决方案。
其中有三种路由器 Router,分别为 MemoryRouter, HashRouter 以及本片测试的 BrowserRouter 。

以下为使用流程中的问题及解决。
【暂时写简化版,有空会在过程中截图补上】

  1. 使用 BrowserRouter 后,点击链接可以正常跳转,但是只要一刷新(当前请求URL非根路径),就会报错404。
    即:访问localhost:3000/可以,刷新也正常。
    但访问如localhost:3000/asd之类的URL,可以点击链接去访问,但刷新后就报404。

解决思路:在服务端做配置(规则设置),当响应状态码为404时,返回页面为index.html即可。
如何设置?
使用webpack配置时,一般使用webpack-dev-server作为开发环境的“临时”服务器,即我们要修改这个服务器的规则。

devServer: {
  port: 3000,
  historyApiFallback: true,
},

官网文档: https://www.webpackjs.com/configuration/dev-server/
在这里插入图片描述

这样一来,根URL以及根URL下URL下可访问,可刷新。
但深层次的URL刷新依旧404。

  1. 深层次目录下刷新,页面无内容,F12分析后发现 app.js 未加载成功。
    app.js为什么加载失败?观察请求URL可发现 app.js 前的URL段多了。
    即:请求app.js的URL拼接错误。

浏览器查看当前页面发现:
<script src="app.js"></script>
因为程序生成的index.html中,引入app.js的方式是相对路径(当前路径下的app,js)
所以才有深层次URL下刷新就会失败(因为请求本层次下的app.js,当然找不到)。

解决思路:程序生成 index.html 时这样:<script src="/app.js"></script>
虽然只是多了一个/,但确实从相对路径到绝对路径的转变。
这样即使在任何目录层次,刷新页面请求app.js的路径都是localhost:3000/app.js。(暂以开发环境为例)

配置webpack输出:

output: {
  // ...
  publicPath: "/",  // 向index.html织入<script>时src的前缀。"app.js"-->"/app.js"
},

官网文档:https://www.webpackjs.com/concepts/output/
在这里插入图片描述

后端部署问题

编译好后的index.html + app.js 部署到后端项目的静态文件夹中。
如: SpringBoot 项目的 src/main/resources/statics中。

就会发现:在非根URL时刷新,页面又404?
原因:
之前开发环境下配置的devServer.historyApiFallbackwebpack-dev-server的404处理规则。
现在换了新的后端服务(即我们的SpringBoot项目),这个项目也需要配置一些规则:
当响应码Wie404的时候,返回一个指定的页面 index.html

配置方法可参考:SpringBoot 统一配置错误页面 403 404 500

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页