react 使用 BrowserRouter 模式打包部署到 github 或 gitee 后刷新 404 处理
react 使用 BrowserRouter 模式打包部署到 github 或 gitee 后刷新 404 处理
·
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 问题。
缺点：
- 由于所有路由信息都存在了内存中，所以切换路由或者刷新页面时，地址栏永远不会发生变化。
- 不能真正解决刷新问题，在任何路由页面刷新都会跳转到首页。
瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)