社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
之前按照各种教程用BrowserHistory(官方推荐,各种吹)实现了路由跳转
效果如下
结果一刷新就报错了,各种get不到页面…..
然后,查资料说BrowserHistory要配合服务器,然后将项目打包丢在nginx
上,然而,,然并卵并没有什么卵用,然后又查了下,说要是
当nginx找不到页面时让他去找我们配置好的页面
具体原因:
之所以你在浏览器内可以由首页跳转到其他路由地址,是因为这是由前端自行渲染的,你在React Router定义了对应的路由,脚本并没有刷新网页访问后台,是JS动态更改了location。当你刷新时,你首先是访问的后台地址,然后返回的页面内加载了React代码,最后在浏览器内执行;也就是说如果这个时候报404,是因为你后台并没有针对这个路由给出返回HTML内容,也谈不上执行React Router了。解决办法就一条:如果你期望所有的路由都由React Router来定义,只有你的后台,无论任何路径,都返回index.html就好了。剩下的事情交给React Router。那么你要做的就是修改后台服务器,可以放在apache,也可以放在你的java路由内做一个通配路径处理。
解决办法
如果使用nginx服务器,加上try_files配置:
location / {
......
try_files $uri /index.html;
}`
然后,主页是跳过去了,然而又报错了!
然后,网上的大神是这样说的
然后,美滋滋的去试! 然并卵好吗!没什么卵用
最后没办法 果断放弃BrowserHistory,用了被各种大神嫌弃的要死的hashHistory
尼玛!真是谁用谁知道啊,特么很好用好不好!
具体为什么大家都推荐用browserHistory是因为
首先 browserHistory 其实使用的是 HTML5 的 History API,浏览器提供相应的接口来修改浏览器的历史记录;而 hashHistory 是通过改变地址后面的 hash 来改变浏览器的历史记录;
History API 提供了 pushState() 和 replaceState() 方法来增加或替换历史记录。而 hash 没有相应的方法,所以并没有替换历史记录的功能。但 react-router 通过 polyfill 实现了此功能,具体实现没有看,好像是使用 sessionStorage。
另一个原因是 hash 部分并不会被浏览器发送到服务端,也就是说不管是请求 #foo 还是 #bar ,服务只知道请求了 index.html 并不知道 hash 部分的细节。而 History API 需要服务端支持,这样服务端能获取请求细节。
还有一个原因是因为有些应该会忽略 URL 中的 hash 部分,记得之前将 URL 使用微信分享时会丢失 hash 部分。
虽然说得很有道理,但我还是坚持用hashHistory,我特么只是想跳转而已
具体用法
1,先引入HashRouter
import {
Router as HashRouter , // 或者是HashRouter、MemoryRouter
Route, // 这是基本的路由块
Link, // 这是a标签
Switch , // 这是监听空路由的
Redirect, // 这是重定向
Prompt // 防止转换
} from 'react-router-dom'
2 引入createHistory
import createHistory from 'history/createHashHistory'
const history = createHistory();
3 构建router
ReactDOM.render(
<HashRouter history={history}>
<div className={universal.rowStart} >
<NavigationBar></NavigationBar>
<Route exact path="/" component={JavaIndex} key={location.key}/>
<Route path="/JavaIndex" component={JavaIndex}/>
<Route path="/JsIndex" component={JsIndex}/>
<Route path="/ProjectIndex" component={ProjectIndex}/>
<Route path="/PersonIndex" component={PersonIndex}/>
</div>
</HashRouter >,
4 写跳转事件
history.push(this.props.flag);
然后就可以了,随你怎么刷新都不会报错了,大家以后遇到坑以后尽量去看看官方文档,mmp,总有些傻逼喜欢复制来复制去,自己不懂在别人的博客上黏贴一段,百度一下,七八篇一模一样的原创博文,
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!