文档章节

使用react-router 浏览器刷新,页面404问题解决

馒头
 馒头
发布于 2016/03/18 14:42
字数 644
阅读 6650
收藏 2

首先我们先找到问题,再解决问题,别嫌我啰嗦,首先说说react路由history三种模式。

history 配置

React Router 是建立在 history 之上的。 简而言之,一个 history 知道如何去监听浏览器地址栏的变化, 并解析这个 URL 转化为 location 对象, 然后 router 使用它匹配到路由,最后正确地渲染对应的组件。
常用的 history 有三种形式, 但是你也可以使用 React Router 实现自定义的 history。

  • createHashHistory

  • createBrowserHistory

  • createMemoryHistory

这三个有什么区别呢:

createHashHistory

这是一个你会获取到的默认 history ,如果你不指定某个 history 。它用到的是 URL 中的 hash(#)部分去创建形如 http://mtui.mtsee.com/#/help 的路由。
这个 支持 ie8+ 的浏览器,但是因为是 hash 值,所以不推荐使用。

createBrowserHistory

Browser history 是由 React Router 创建浏览器应用推荐的 history。它使用 History API 在浏览器中被创建用于处理 URL,新建一个像这样真实的 URL http://mtui.mtsee.com/help

Memoryhistory

不会在地址栏被操作或读取。

那么问题来了~

使用reateHashHistory,因为这里用的#hash 方式,真正的url没变。变的只是hash值,所以我们下次直接访问http://mtui.mtsee.com/#/help 这个地址就能直接访问,但是这种模式不利于SEO,不推荐使用。

使用createBrowserHistory的时候,因为是使用 History API处理url的,真实的url已经改变,当我们重新刷新浏览器,内部已经重置,我们下次再访问地址http://mtui.mtsee.com/help 的时候,之前的history已经更新,相当于直接到服务器去请求这个url,当然我们用的是前端路由,服务器肯定不知道这个是啥咯,所以返回404页面。

这里需要在服务器去设置。网上相关的资料很少,找到了一篇文章:nginx-for-react ,但是我用的是阿帕奇,不想去安装其他服务器,于是自己琢磨了下,决定试试对404进行重定向。于是想到了一个简单的方法:修改htaccess文件

htaccess添加一句话:ErrorDocument 404 /index.html 

居然搞定了~ 问题得到解决~

那么404页面呢?这么粗鲁,老板知道吗?抛砖引玉,设置htaceess指定url重定向,自己去捣鼓啦,反正重定向到 /index.html 就可以的~





© 著作权归作者所有

馒头

馒头

粉丝 24
博文 12
码字总数 16462
作品 1
成都
前端工程师
私信 提问
react,vue等部署单页面项目时,访问刷新出现404问题

1. 问题描述: 上个礼拜开发了个简单的单页面移动端页面,地址,然后进入到文章详情,刷新浏览器,发现浏览器出现404了,what happen? 如下图: image.png 2. 问题原因: 刷新页面时访问的资源...

极客教程
2017/11/14
0
0
nginx服务器配置React的Browser路由模式,并避免出现404

前言 React路由模式分为两种: hashHistory: 比如 http://localhost:8080/#/login browserHistory 比如 http://localhost:8080/login 的好处大于, 但是麻烦的地方就是,路由模式,需要服务器...

非著名程序猿
09/16
0
0
React单页应用中使用react-router-v4自定义页面离开确认弹框的方法

问题描述 项目技术栈是react+ant-design; 产品需求是在某个页面表单有信息输入或变更,用户未保存要离开该页面时,自定义提示用户提示,如果用户确认离开则跳转到新页面,否则留在当前页。 ...

保山
07/01
0
0
React-router路由基本原理

1. 路由基本功能 2.react-router的状态机特性 3.用户点击了Link组件后路由系统中到底发生了哪些变化 4.前端路由如何处理浏览器的前进和后退功能 location.hash 与 hashchange history.pushS...

大灰狼的小绵羊哥哥
02/15
0
0
「面试必考」单页路由解析与实现

前言 现代前端项目多为单页Web应用(SPA),在单页Web应用中路由是其中的重要环节。 每个现代前端框架都有与之对应的路由实现,例如 vue-router、react-router 等。 本文并不涉及 vue-router、...

云中桥
07/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Handler简解

Handler 这里简化一下代码 以便理解 Handler不一定要在主线程建 但如Handler handler = new Handler(); 会使用当前的Looper的, 由于要更新UI 所以最好在主线程 new Handler() { mLooper = Lo...

shzwork
9分钟前
1
0
h5获取摄像头拍照功能

完整代码展示: <!DOCTYPE html> <head> <title>HTML5 GetUserMedia Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum......

诗书易经
12分钟前
1
0
正向代理和反向代理

文章来源 运维公会:正向代理和反向代理 1、正向代理 (1)服务对象不同 正向代理服务器的服务对象是客户端,可以将客户端和代理服务器看作一个整体。 (2)配置方法不同 需要在客户端配置代...

运维团
28分钟前
2
0
5个避免意外论文重复率高的方法

即使你不是故意抄袭,但你可能在无意中抄袭了别人的论文, 这个叫做意外抄袭,它可能正发生在你身上,如果你不熟悉学术 道德规范,这里将告诉你5个基本的方法来避免意外抄袭。 Tip1 熟悉其他...

论文辅导员
29分钟前
2
0
Maven通过profiles标签读取不同的配置

<profiles> <profile> <id>dev</id> <properties> <profiles.active>dev</profiles.active> </properties> ......

时刻在奔跑
35分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部