典型的o2o网站有哪些,免费英文网站建设,电脑网络公司经营范围,预付网站制作费怎么做凭证一、简介
在单页面应用中#xff0c;如何在切换页面后#xff0c;不刷新浏览器呢#xff1f;为了解决这个问题#xff0c;有两种方法#xff0c;就是hash路由模式、history路由模式#xff0c;而 react router 的两种路由就是使用这两种路由模式。
二、区别 HashRouter…一、简介
在单页面应用中如何在切换页面后不刷新浏览器呢为了解决这个问题有两种方法就是hash路由模式、history路由模式而 react router 的两种路由就是使用这两种路由模式。
二、区别 HashRouter 基于 hash 模式页面跳转原理是使用了 location.hash、location.replace和 vue router 的 hash 模式实现一致。 比较丑在域名后先拼接 /#再拼接路径也就是利用锚点实现路由的跳转。如http://www.dzm.com/#/xx BrowserRouter 基于 history 模式页面跳转原理是使用了 HTML5 为浏览器全局的 history 对象新增了两个 API包括 history.pushState、history.replaceState和 vue router 的 history 模式实现一致。 更加优雅 直接拼接路径。如http://www.dzm.com/xx 后端需做请求处理切换路由后请求接口路径会发生变化后端需要配合做处理。 兼容低版本浏览器可能不支持目前市面上热门浏览器应该都支持了不是特殊情况可以放心使用。
三、使用场景 HashRouter 项目部署在内网如 to B 项目、本公司业务人员用的项目等 BrowserRouter 项目部署在公网如 to C 项目、面向大众的项目url 路径美观点当然更好但后端需要做处理不过目前无论 to 哪基本都选用这种特殊情况除外。
四、使用 安装附路由的详细使用 # 默认安装最新版本当前是 6.x
$ npm install --save react-router-domindex.tsx import React from react
import {// HashRouter as Router, // hash模式BrowserRouter as Router, // history模式Route,Switch,
} from react-router-dom
import Home from ../containers/homeconst BasicRouter () (RouterSwitchRoute exact path/ component{Home} //Switch/Router
)export default BasicRouter
