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

前端之家收集整理的这篇文章主要介绍了使用react-router 浏览器刷新,页面404问题解决前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

首先我们先找到问题,再解决问题,别嫌我啰嗦,首先说说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 就可以的~

原文链接:https://www.f2er.com/react/307044.html

猜你在找的React相关文章