react 使用 BrowserRouter 模式打包部署到 github 或 gitee 刷新 404 处理
说明:以下 3 种解决方案都是前端处理方案,所以各自都存在一些优缺点,需根据情况选择。
方式一:改用 HashRouter
模式
将 BrowserRouter 改为 HashRouter 模式。
优缺点
优点:
- 可以很方便的解决大部分 404 问题。
缺点:
- 出现让部分人反感的
#
符号 - 页面如果使用了锚点定位功能(比如使用了 antd 组件库的 Anchor 组件),由于哈希模式的
#
与 锚点定位的#
存在冲突,会导致锚点定位失效,此时必须修改锚点定位逻辑代码才能恢复锚点功能。
方式二:保持 BrowserRouter
模式不变
由于 github
和 gitee
在找不到页面的情况下都会去查找根目录下的 404.html
页面,所以我们可以在根目录(也就是 public 目录之下且与 index.html 同级的位置)创建一个 404.html
页面,让 404 页面帮我们重新跳回首页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Loading Page</title>
<script type="text/javascript">
// 由于我的项目部署后路径是 'https://xxx.gitee.io/demo',所以我这里的根路径是 '/demo',而不是 '/'
window.location.href = '/demo'
</script>
</head>
<body>
<div>loading...</div>
</body>
</html>
优缺点
优点:
- 不用变动原来的 BrowserRouter 路由模式。
- 路由跳转时地址栏路径能够正常切换
缺点:
- 不能真正解决刷新问题,在任何路由页面刷新都会跳转到首页。
方式三:改用 MemoryRouter
模式
将 BrowserRouter 改为 MemoryRouter 模式。
优缺点
优点:
- 可以很方便的解决 404 问题。
缺点:
- 由于所有路由信息都存在了内存中,所以切换路由或者刷新页面时,地址栏永远不会发生变化。
- 不能真正解决刷新问题,在任何路由页面刷新都会跳转到首页。