首先我们先找到问题,再解决问题,别嫌我啰嗦,首先说说react路由history三种模式。
React Router 是建立在 history 之上的。 简而言之,一个 history 知道如何去监听浏览器地址栏的变化, 并解析这个 URL 转化为 location 对象, 然后 router 使用它匹配到路由,最后正确地渲染对应的组件。
常用的 history 有三种形式, 但是你也可以使用 React Router 实现自定义的 history。
createHashHistory
createBrowserHistory
createMemoryHistory
这是一个你会获取到的默认 history ,如果你不指定某个 history 。它用到的是 URL 中的 hash(#)部分去创建形如http://mtui.mtsee.com/#/help 的路由。
这个 支持 ie8+ 的浏览器,但是因为是 hash 值,所以不推荐使用。
Browser history 是由 React Router 创建浏览器应用推荐的 history。它使用 History API 在浏览器中被创建用于处理 URL,新建一个像这样真实的 URL http://mtui.mtsee.com/help。
不会在地址栏被操作或读取。
那么问题来了~
使用reateHashHistory,因为这里用的#hash 方式,真正的url没变。变的只是hash值,所以我们下次直接访问http://mtui.mtsee.com/#/help 这个地址就能直接访问,但是这种模式不利于SEO,不推荐使用。
使用createBrowserHistory的时候,因为是使用 History API处理url的,真实的url已经改变,当我们重新刷新浏览器,内部已经重置,我们下次再访问地址http://mtui.mtsee.com/help 的时候,之前的history已经更新,相当于直接到服务器去请求这个url,当然我们用的是前端路由,服务器肯定不知道这个是啥咯,所以返回404页面。
这里需要在服务器去设置。网上相关的资料很少,找到了一篇文章:依靠nginx配置解决 react-router浏览器刷新页面404的问题 ,但是我用的是阿帕奇,不想去安装其他服务器,于是自己琢磨了下,决定试试对404进行重定向。于是想到了一个简单的方法:修改htaccess文件。
htaccess添加一句话:ErrorDocument 404 /index.html
居然搞定了~ 问题得到解决~
那么404页面呢?这么粗鲁,老板知道吗?抛砖引玉,设置htaceess指定url重定向,自己去捣鼓啦,反正重定向到 /index.html 就可以的~