btree hash索引的区别history 与 browserhistory有什么区别
点击联系发帖人
时间：2016-09-18 07:42
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&谈谈 react-router - 推酷
谈谈 react-router
最近使用的 React + webpack 来开发项目，感觉确实是爽的飞起，然而总感觉还是少了点什么。:tired_face:
:smirk:对，是多页面，每次请求页面还要后端路由给你？:smile:多不爽啊，试试 react-router ，简直掌控一切的感觉，只开放一个页面路由接口，其他全给数据接口就:ok_hand:了，:joy:可以和后端哥哥说拜拜了。
:wave::wave::wave::wave::wave::wave::wave::wave::wave::wave::wave: 啪啪啪啪啪～
先贴上官方文档
对了这里还有一份中文文档（不过不是很全）
react-router 是 React 的完整前端路由解决方案，特别在做一个 spa 应用的时候，他能实现 url 和 视图ui 的同步，并且支持后端渲染，异步按需加载等等:smile:。
由于 react-router 文档的多变，这里的例子以当前版本 1.0.1 为准。（1.0之前文档每一个版本的变动都很大，索多了都是泪）
浏览器支持
所有支持 React 的浏览器。
倡议！建议大家也劝说身边的人用
浏览器，关爱前端开发者。
npm install react-router@latest
同时，react-router 是基于 history 开发的，这里你需要安装 history。
注意 react-router 当前版本 1.0.1 依赖的是 history 1.13.1 请不要安装最新版。
不要问我为什么知道，被坑惨了；有同学问，那没有办法用 history 的最新版本嘛？毕竟这只是暂缓之计，解决方案还是有的，那就是等 react-router 作者解决咯 :joy:。
npm install history@1.13.1
构建工具的话，我依然建议是 webpack ， React 和 webpack 是一对好兄弟。
npm install webpack
webpack的使用方法可以看我的前两篇文章：
(求赞！！！)
// 加载依赖包，这是 es6 的语法（我好啰嗦）。import React from 'react'import { render } from 'react-dom'// 这里从 react-router 引入了三个组件，先不解释。import { Router, Route, Link } from 'react-router'const App = React.createClass({
render() {
&h1&App&/h1&
&li&&Link to=&/about&&About&/Link&&/li&
&li&&Link to=&/inbox&&Inbox&/Link&&/li&
{this.props.children}
}});const Inbox = React.createClass({
render() {
}});const About = React.createClass({
render() {
}});render((
&Route path=&/& component={App}&
&Route path=&about& component={About} /&
&Route path=&inbox& component={Inbox} /&
&/Router&), document.getElementById('root'));
我就偷个懒把官方文档的demo直接copy了。
直接先来看 render 下面的内容，这里是用 jsx 语法。 最外层组件是 Router（可以把他看作是react-router提供的最外层容器） , 下一层是 Route，这个是路由组件。对应关系如下：
/ ---& &App /&
/about ---& &App&&About /&&/App&
/inbox ---& &App&&Inbox /&&/App&
path 对应路径，component 对应当前路径渲染的组件。
Route 里面的 Route 表示在父组件路由的 path 路径下面的一级 path 对应的路由，这里的路由是父子嵌套，对应的组件也同样是父子嵌套的。
如果是多级嵌套也同样如此。
不想用 jsx 来写，换个方式吧～
以上例子可以改写成：
...const routerConfig = [
path: '/',
component: App,
childrenRoutes: [
{ path: 'about', component: About },
{ path: 'inbox', component: Inbox },
}];render((
&Router routes={routeConfig} /&), document.getElementById('root'));
这里的结构就更清晰了，我是比较喜欢这种方式。
默认的路由
比如上面的例子，/ 对于的组件是 App , 如果 App 只是渲染了一个导航条，却没有自组件，那打开 比如 qiutc.me/ 的时候不是就没有内容了吗。
把上面例子改一下
...// 添加组件 Indexconst Index = React.createClass({
render() {
}});// 修改配置const routerConfig = [
path: '/',
component: App,
indexRoute: { component: Index },
childrenRoutes: [
{ path: 'about', component: About },
{ path: 'inbox', component: Inbox },
这里加了一个 indexRoute ，表示他在没有匹配子路由的时候，在 / 路由下渲染默认的子组件 Index。
路由组件嵌套也是一样的，比如：
{ path: 'about', component: About, indexRoute: {component: AboutIndex} },
以此类推。
404 NotFound
如果我们打开了一个没有设置路由的链接，就必然需要一个友好的 404 页面。配置如下：
...// 添加 404 组件const NotFound = React.createClass({
render() {
}});// 修改配置const routerConfig = [
path: '/',
component: App,
indexRoute: { component: Index },
childrenRoutes: [
{ path: 'about', component: About },
{ path: 'inbox', component: Inbox },
path: '*',
component: NotFound,
如此简单。
绝对路径与重定向
const routerConfig = [
path: '/',
component: App,
indexRoute: { component: Index },
childrenRoutes: [
{ path: 'about', component: About },
path: 'inbox',
component: Inbox,
childrenRoutes: [
path: 'message/:id',
component: Message,
path: '*',
component: NotFound,
在这里我们访问 /inbox/message/1 对于渲染 Message 组件，这个链接太长了，我们想直接 /message/1 那怎么办，改路由结构？太麻烦了！绝对路径可以帮你做到这个。
把 path: 'message/:id', 改为 path: '/message/:id', 就好了。
等等如果用户之前收藏的链接是 /inbox/message/1 ，那不是就打不开了嘛，和后端路由一样，react-router 也有重定向：redirect
const routerConfig = [
path: '/',
component: App,
indexRoute: { component: Index },
childrenRoutes: [
{ path: 'about', component: About },
path: 'inbox',
component: Inbox,
childrenRoutes: [
path: '/message/:id',
component: Message,
path: 'message/:id',
onEnter: function (nextState, replaceState) {
replaceState(null, '/messages/' + nextState.params.id);
path: '*',
component: NotFound,
onEnter 方法表示进入这个路由前执行的方法，在进入 /inbox/messages/:id 的前，执行
function (nextState, replaceState) {
replaceState(null, '/messages/' + nextState.params.id);}
nextState 表示要进入的下一个路由，这里就是 /inbox/messages/:id ， replaceState 表示替换路由状态的方法，把 /inbox/messages/:id 替换成 /messages/:id，然后就可以重定向到 /messages/:id。
同样的也有 onLeave 这个方法
表示在离开路由前执行。
———————————————————
当然如果你用的是 jsx 语法，有更简单的组件可以实现：
import { Redirect } from 'react-router'React.render((
&Route path=&/& component={App}&
&IndexRoute component={Index} /&
&Route path=&about& component={About} /&
&Route path=&inbox& component={Inbox}&
&Route path=&/messages/:id& component={Message} /&
{/* 跳转 /inbox/messages/:id 到 /messages/:id */}
&Redirect from=&messages/:id& to=&/messages/:id& /&
&/Router&), document.getElementById('root'))
路径匹配原理
React Router 使用路由嵌套的概念来让你定义 view 的嵌套集合，当一个给定的 URL 被调用时，整个集合中（命中的部分）都会被渲染。嵌套路由被描述成一种树形结构。React Router 会深度优先遍历整个理由配置来寻找一个与给定的 URL 相匹配的路由。
简单来讲，就是说，匹配的时候会先匹配到外层路径，然后依次遍历到内层。比如 /inbox/messages/:id 会先匹配 /，渲染 / 对应的组件 App，然后再到 / 的下一层寻找 /inbox ，同样渲染 /inbox 对应的组件 Inbox，依次类推，直到到 message/:id。
tip：使用绝对路径可以忽略嵌套关系，如上面例子。
路由路径是匹配一个（或一部分）URL 的 一个字符串模式。大部分的路由路径都可以直接按照字面量理解，除了以下几个特殊的符号：
/:paramName – 匹配一段位于 /、? 或 # 之后的 URL。 命中的部分将被作为一个参数
(/) – 在它内部的内容被认为是可选的
/* – 匹配任意字符（非贪婪的）直到命中下一个字符或者整个 URL 的末尾，并创建一个 splat 参数
&Route path=&/hello/:name&&
// 匹配 /hello/michael 和 /hello/ryan&Route path=&/hello(/:name)&&
// 匹配 /hello, /hello/michael 和 /hello/ryan&Route path=&/files/*.*&&
// 匹配 /files/hello.jpg 和 /files/path/to/hello.jpg
最后，路由算法会根据定义的顺序自顶向下匹配路由。因此，当你拥有两个兄弟路由节点配置时，你必须确认前一个路由不会匹配后一个路由中的路径。例如：
&Route path=&/comments& ... /&&Redirect from=&/comments& ... /&
第二个是不会被执行的。
拿到参数路径的
比如上面的 /messages/:id ，这个id可能是我们在 Message 获取数据时需要的 id。
他会被当做一个参数传给 params，parmas 会传给 Message 组件的 props：
const Message = React.createClass({
render: function() {
&div&{ this.props.params.id }&/div&
这样就可以获取到了。
history 配置
React Router 是建立在 history 之上的。 简而言之，一个 history 知道如何去监听浏览器地址栏的变化， 并解析这个 URL 转化为 location 对象， 然后 router 使用它匹配到路由，最后正确地渲染对应的组件。常用的 history 有三种形式， 但是你也可以使用 React Router 实现自定义的 history。
createHashHistory
createBrowserHistory
createMemoryHistory
这三个有什么区别呢：
createHashHistory
这是一个你会获取到的默认 history ，如果你不指定某个 history 。它用到的是 URL 中的 hash（#）部分去创建形如 /#/some/path 的路由。这个 支持 ie8＋ 的浏览器，但是因为是 hash 值，所以不推荐使用。
createBrowserHistory
Browser history 是由 React Router 创建浏览器应用推荐的 history。它使用 History API 在浏览器中被创建用于处理 URL，新建一个像这样真实的 /some/path。
Memoryhistory
不会在地址栏被操作或读取。
import { createBrowserHistory, useBasename } from 'history';const historyConfig = useBasename(createHistory)({
basename: '/'
// 根目录名});...render((
&Router routes={routeConfig} History={historyConfig} /&), document.getElementById('root'));
Link&IndexLink
我们在最开头看到这样一个东西：
const App = React.createClass({
render() {
&h1&App&/h1&
&li&&Link to=&/about&&About&/Link&&/li&
&li&&Link to=&/inbox&&Inbox&/Link&&/li&
{this.props.children}
Link 会被渲染成 a ，to 其实就是 href ，但是 react-router 会阻止默认跳转页面，而改成 history 路由的变换。
切换到的路由地址
跟在 url 的 query 参数，比如
query={{q: &que&}} 对应 `/example?a=que
这里的 query 同样可以像 params 会被传入下一个路由组件的 props
hash 跟在 url 的 hash 参数，比如
hash={111} 对应 `/example#111
这里的 query 同样可以像 params 会被传入下一个路由组件的 props
activeClassName当前 url 路径如果和 Link 的 to 匹配 这个 Link 就会有一个定义的属性，比如：
在 /index 下&Link to=&/index& activeClassName={&active&} activeStyle={{color: 'red'}} &/&/Link&这里渲染出来的 a 标签会有一个激活的 active 类名，还会有一个颜色 red&Link to=&/about& activeClassName={&active&} activeStyle={{color: 'red'}} &/&/Link&这里渲染出来的 a 标签就不会有以上属性
activeStyle同上
点击的时候执行的函数，会传入一个 e 事件对象，你可以 e.stopPropagation() 阻止默认路由切换。
在上面有一个问题如果：
在 / 下 和 /index&Link to=&/& activeClassName={&active&} activeStyle={{color: 'red'}} &/&/Link&这个 Link 渲染出来的 a 标签都会激活 active 属性，并且会带上 color: 'red'因为 / 和 /index 和 ／ 都是匹配的
这时候就可以用:
&IndexLink to=&/& activeClassName={&active&} activeStyle={{color: 'red'}} &/&/IndexLink&只会在 / 下呗激活，在 /index 或者其他下面，不会被激活
根据路由按需异步加载js
服务器端渲染路由视图
react-router的更高级用法
会在下一篇文章来探讨。
毕竟哥也需要去深入研究一下才敢献丑。:joy::joy::joy:
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;
欢迎您订阅我们的技术周刊
我们会向您分享我们精心收集整理的，最新的行业资讯，技术动态，外文翻译，热点文章;
我们使用第三方邮件列表向您推送，我们不保存您的任何个人资料，注重您的隐私，您可以随时退订,
欢迎分享您的观点，经验，技巧，心得
让我们一起找寻程序员的快乐，探索技术, 发现IT人生的乐趣;
本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG，请即时告知我们： ourjs(
订阅邮件周刊
history.js 一个无刷新就可改变浏览器栏地址的插件（不依赖jquery）
注意 转载须保留原文链接，译文链接，作者译者等信息。&&
示例： 简介HTML4有一些对浏览历史的前进后退API的支持如：window.history.back();window.history.forward();window.history.go(-1);window.history.go(1);HTML5浏览器新添加了不刷新改变网址地址的API：var currentState = history.var stateObj = { foo: "bar" };window.history.pushState(stateObj, "page 2", "bar.html");这些API构建单页面无刷新网站是十分有帮助的，很可惜他们在老浏览器中无法使用。history.js可以解决这个问题。History.js优雅地支持所有浏览器的History/State的
API（pushState，replaceState，onPopState）。包括数据，title，replaceState。支持
jQuery，MooTools和Prototype。在HTML5浏览器，它使用原生API，可以直接修改URL，而无需再使用哈希值。对于HTML4
浏览器则使用Hash值进行兼容。代码示例(function(window,undefined){
// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
var State = History.getState(); // Note: We are using History.getState() instead of event.state
// Change our States
History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4"
History.back(); // logs {state:3}, "State 3", "?state=3"
History.back(); // logs {state:1}, "State 1", "?state=1"
History.back(); // logs {}, "Home Page", "?"
History.go(2); // logs {state:3}, "State 3", "?state=3"
})(window);
效果当在HTML5浏览器中时地址栏的变化
/?state=3当在HTML4浏览器中时地址栏的变化
/#?state=1&_suid=1
/#?state=2&_suid=2
/#?state=3&_suid=3
/#?state=4
/#?state=3&_suid=3
/#?state=1&_suid=1
/#?state=3&_suid=3项目地址：
&热门文章 - 分享最多
&相关阅读 - JS开源
&关键字 - 开源
&欢迎订阅 - 技术周刊
我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私，您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐，探索技术, 发现IT人生的乐趣;
我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊关于location.hash history.length的一个怪异现象？
```javascriptsetTimeout(function(){ console.log(window.history.length) location.hash = location.hash + 'sdf' console.log(window.history.length)})``````javascript console.log(window.history.length) location.hash = location.hash + 'sdf' console.log(window.history.length)```在页面刚加载的时候，第一种能location.hash变化后history.length也会增加。第二种就不会。完全看不出有什么区别
上面是Chrome 版本 51.0. m (64-bit) 的结果上面是Chrome 版本 51.0. m (64-bit) 的结果又试了下Edge 版本 25. 也是一样的结果之前隐约听说各浏览器在处理console.log的时候有很大的不同,试着在这个方向上考虑一下吧
如果你用timeline把这个过程记录下来查看的话，大概能发现什么。也许这就只是浏览器的一种设定而已，或者去看看规范？
已有帐号？
无法登录？
社交帐号登录hashchange和popstate的用法区别?
html5中history api 中增加了popstate事件，这个事件在hash发生变化时会触发； 且如果hashchange需要用到history state(指pushstate或replacestate的数据)，需要从popstate的event.state中获取，hashchange的event中并没有什么有用的属性； 所以hashchange有
hashchange和popstate的用法区别?
【hashchange和popstate的用法区别?】
请将本文分享给你的朋友：
hashchange和popstate的用法区别? 的相关文章
------分隔线----------------------------
北京联盟郑重声明：本文仅代表作者个人观点，与北京联盟无关。其原创性及文中陈述内容未经本站证实，北京联盟对本文及其中全部或者部分内容的真实性、完整性、及时性不作任何保证和承诺，请网友自行核实相关内容。}
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&谈谈 react-router - 推酷
谈谈 react-router
最近使用的 React + webpack 来开发项目，感觉确实是爽的飞起，然而总感觉还是少了点什么。:tired_face:
:smirk:对，是多页面，每次请求页面还要后端路由给你？:smile:多不爽啊，试试 react-router ，简直掌控一切的感觉，只开放一个页面路由接口，其他全给数据接口就:ok_hand:了，:joy:可以和后端哥哥说拜拜了。
:wave::wave::wave::wave::wave::wave::wave::wave::wave::wave::wave: 啪啪啪啪啪～
先贴上官方文档
对了这里还有一份中文文档（不过不是很全）
react-router 是 React 的完整前端路由解决方案，特别在做一个 spa 应用的时候，他能实现 url 和 视图ui 的同步，并且支持后端渲染，异步按需加载等等:smile:。
由于 react-router 文档的多变，这里的例子以当前版本 1.0.1 为准。（1.0之前文档每一个版本的变动都很大，索多了都是泪）
浏览器支持
所有支持 React 的浏览器。
倡议！建议大家也劝说身边的人用
浏览器，关爱前端开发者。
npm install react-router@latest
同时，react-router 是基于 history 开发的，这里你需要安装 history。
注意 react-router 当前版本 1.0.1 依赖的是 history 1.13.1 请不要安装最新版。
不要问我为什么知道，被坑惨了；有同学问，那没有办法用 history 的最新版本嘛？毕竟这只是暂缓之计，解决方案还是有的，那就是等 react-router 作者解决咯 :joy:。
npm install history@1.13.1
构建工具的话，我依然建议是 webpack ， React 和 webpack 是一对好兄弟。
npm install webpack
webpack的使用方法可以看我的前两篇文章：
(求赞！！！)
// 加载依赖包，这是 es6 的语法（我好啰嗦）。import React from 'react'import { render } from 'react-dom'// 这里从 react-router 引入了三个组件，先不解释。import { Router, Route, Link } from 'react-router'const App = React.createClass({
render() {
&h1&App&/h1&
&li&&Link to=&/about&&About&/Link&&/li&
&li&&Link to=&/inbox&&Inbox&/Link&&/li&
{this.props.children}
}});const Inbox = React.createClass({
render() {
}});const About = React.createClass({
render() {
}});render((
&Route path=&/& component={App}&
&Route path=&about& component={About} /&
&Route path=&inbox& component={Inbox} /&
&/Router&), document.getElementById('root'));
我就偷个懒把官方文档的demo直接copy了。
直接先来看 render 下面的内容，这里是用 jsx 语法。 最外层组件是 Router（可以把他看作是react-router提供的最外层容器） , 下一层是 Route，这个是路由组件。对应关系如下：
/ ---& &App /&
/about ---& &App&&About /&&/App&
/inbox ---& &App&&Inbox /&&/App&
path 对应路径，component 对应当前路径渲染的组件。
Route 里面的 Route 表示在父组件路由的 path 路径下面的一级 path 对应的路由，这里的路由是父子嵌套，对应的组件也同样是父子嵌套的。
如果是多级嵌套也同样如此。
不想用 jsx 来写，换个方式吧～
以上例子可以改写成：
...const routerConfig = [
path: '/',
component: App,
childrenRoutes: [
{ path: 'about', component: About },
{ path: 'inbox', component: Inbox },
}];render((
&Router routes={routeConfig} /&), document.getElementById('root'));
这里的结构就更清晰了，我是比较喜欢这种方式。
默认的路由
比如上面的例子，/ 对于的组件是 App , 如果 App 只是渲染了一个导航条，却没有自组件，那打开 比如 qiutc.me/ 的时候不是就没有内容了吗。
把上面例子改一下
...// 添加组件 Indexconst Index = React.createClass({
render() {
}});// 修改配置const routerConfig = [
path: '/',
component: App,
indexRoute: { component: Index },
childrenRoutes: [
{ path: 'about', component: About },
{ path: 'inbox', component: Inbox },
这里加了一个 indexRoute ，表示他在没有匹配子路由的时候，在 / 路由下渲染默认的子组件 Index。
路由组件嵌套也是一样的，比如：
{ path: 'about', component: About, indexRoute: {component: AboutIndex} },
以此类推。
404 NotFound
如果我们打开了一个没有设置路由的链接，就必然需要一个友好的 404 页面。配置如下：
...// 添加 404 组件const NotFound = React.createClass({
render() {
}});// 修改配置const routerConfig = [
path: '/',
component: App,
indexRoute: { component: Index },
childrenRoutes: [
{ path: 'about', component: About },
{ path: 'inbox', component: Inbox },
path: '*',
component: NotFound,
如此简单。
绝对路径与重定向
const routerConfig = [
path: '/',
component: App,
indexRoute: { component: Index },
childrenRoutes: [
{ path: 'about', component: About },
path: 'inbox',
component: Inbox,
childrenRoutes: [
path: 'message/:id',
component: Message,
path: '*',
component: NotFound,
在这里我们访问 /inbox/message/1 对于渲染 Message 组件，这个链接太长了，我们想直接 /message/1 那怎么办，改路由结构？太麻烦了！绝对路径可以帮你做到这个。
把 path: 'message/:id', 改为 path: '/message/:id', 就好了。
等等如果用户之前收藏的链接是 /inbox/message/1 ，那不是就打不开了嘛，和后端路由一样，react-router 也有重定向：redirect
const routerConfig = [
path: '/',
component: App,
indexRoute: { component: Index },
childrenRoutes: [
{ path: 'about', component: About },
path: 'inbox',
component: Inbox,
childrenRoutes: [
path: '/message/:id',
component: Message,
path: 'message/:id',
onEnter: function (nextState, replaceState) {
replaceState(null, '/messages/' + nextState.params.id);
path: '*',
component: NotFound,
onEnter 方法表示进入这个路由前执行的方法，在进入 /inbox/messages/:id 的前，执行
function (nextState, replaceState) {
replaceState(null, '/messages/' + nextState.params.id);}
nextState 表示要进入的下一个路由，这里就是 /inbox/messages/:id ， replaceState 表示替换路由状态的方法，把 /inbox/messages/:id 替换成 /messages/:id，然后就可以重定向到 /messages/:id。
同样的也有 onLeave 这个方法
表示在离开路由前执行。
———————————————————
当然如果你用的是 jsx 语法，有更简单的组件可以实现：
import { Redirect } from 'react-router'React.render((
&Route path=&/& component={App}&
&IndexRoute component={Index} /&
&Route path=&about& component={About} /&
&Route path=&inbox& component={Inbox}&
&Route path=&/messages/:id& component={Message} /&
{/* 跳转 /inbox/messages/:id 到 /messages/:id */}
&Redirect from=&messages/:id& to=&/messages/:id& /&
&/Router&), document.getElementById('root'))
路径匹配原理
React Router 使用路由嵌套的概念来让你定义 view 的嵌套集合，当一个给定的 URL 被调用时，整个集合中（命中的部分）都会被渲染。嵌套路由被描述成一种树形结构。React Router 会深度优先遍历整个理由配置来寻找一个与给定的 URL 相匹配的路由。
简单来讲，就是说，匹配的时候会先匹配到外层路径，然后依次遍历到内层。比如 /inbox/messages/:id 会先匹配 /，渲染 / 对应的组件 App，然后再到 / 的下一层寻找 /inbox ，同样渲染 /inbox 对应的组件 Inbox，依次类推，直到到 message/:id。
tip：使用绝对路径可以忽略嵌套关系，如上面例子。
路由路径是匹配一个（或一部分）URL 的 一个字符串模式。大部分的路由路径都可以直接按照字面量理解，除了以下几个特殊的符号：
/:paramName – 匹配一段位于 /、? 或 # 之后的 URL。 命中的部分将被作为一个参数
(/) – 在它内部的内容被认为是可选的
/* – 匹配任意字符（非贪婪的）直到命中下一个字符或者整个 URL 的末尾，并创建一个 splat 参数
&Route path=&/hello/:name&&
// 匹配 /hello/michael 和 /hello/ryan&Route path=&/hello(/:name)&&
// 匹配 /hello, /hello/michael 和 /hello/ryan&Route path=&/files/*.*&&
// 匹配 /files/hello.jpg 和 /files/path/to/hello.jpg
最后，路由算法会根据定义的顺序自顶向下匹配路由。因此，当你拥有两个兄弟路由节点配置时，你必须确认前一个路由不会匹配后一个路由中的路径。例如：
&Route path=&/comments& ... /&&Redirect from=&/comments& ... /&
第二个是不会被执行的。
拿到参数路径的
比如上面的 /messages/:id ，这个id可能是我们在 Message 获取数据时需要的 id。
他会被当做一个参数传给 params，parmas 会传给 Message 组件的 props：
const Message = React.createClass({
render: function() {
&div&{ this.props.params.id }&/div&
这样就可以获取到了。
history 配置
React Router 是建立在 history 之上的。 简而言之，一个 history 知道如何去监听浏览器地址栏的变化， 并解析这个 URL 转化为 location 对象， 然后 router 使用它匹配到路由，最后正确地渲染对应的组件。常用的 history 有三种形式， 但是你也可以使用 React Router 实现自定义的 history。
createHashHistory
createBrowserHistory
createMemoryHistory
这三个有什么区别呢：
createHashHistory
这是一个你会获取到的默认 history ，如果你不指定某个 history 。它用到的是 URL 中的 hash（#）部分去创建形如 /#/some/path 的路由。这个 支持 ie8＋ 的浏览器，但是因为是 hash 值，所以不推荐使用。
createBrowserHistory
Browser history 是由 React Router 创建浏览器应用推荐的 history。它使用 History API 在浏览器中被创建用于处理 URL，新建一个像这样真实的 /some/path。
Memoryhistory
不会在地址栏被操作或读取。
import { createBrowserHistory, useBasename } from 'history';const historyConfig = useBasename(createHistory)({
basename: '/'
// 根目录名});...render((
&Router routes={routeConfig} History={historyConfig} /&), document.getElementById('root'));
Link&IndexLink
我们在最开头看到这样一个东西：
const App = React.createClass({
render() {
&h1&App&/h1&
&li&&Link to=&/about&&About&/Link&&/li&
&li&&Link to=&/inbox&&Inbox&/Link&&/li&
{this.props.children}
Link 会被渲染成 a ，to 其实就是 href ，但是 react-router 会阻止默认跳转页面，而改成 history 路由的变换。
切换到的路由地址
跟在 url 的 query 参数，比如
query={{q: &que&}} 对应 `/example?a=que
这里的 query 同样可以像 params 会被传入下一个路由组件的 props
hash 跟在 url 的 hash 参数，比如
hash={111} 对应 `/example#111
这里的 query 同样可以像 params 会被传入下一个路由组件的 props
activeClassName当前 url 路径如果和 Link 的 to 匹配 这个 Link 就会有一个定义的属性，比如：
在 /index 下&Link to=&/index& activeClassName={&active&} activeStyle={{color: 'red'}} &/&/Link&这里渲染出来的 a 标签会有一个激活的 active 类名，还会有一个颜色 red&Link to=&/about& activeClassName={&active&} activeStyle={{color: 'red'}} &/&/Link&这里渲染出来的 a 标签就不会有以上属性
activeStyle同上
点击的时候执行的函数，会传入一个 e 事件对象，你可以 e.stopPropagation() 阻止默认路由切换。
在上面有一个问题如果：
在 / 下 和 /index&Link to=&/& activeClassName={&active&} activeStyle={{color: 'red'}} &/&/Link&这个 Link 渲染出来的 a 标签都会激活 active 属性，并且会带上 color: 'red'因为 / 和 /index 和 ／ 都是匹配的
这时候就可以用:
&IndexLink to=&/& activeClassName={&active&} activeStyle={{color: 'red'}} &/&/IndexLink&只会在 / 下呗激活，在 /index 或者其他下面，不会被激活
根据路由按需异步加载js
服务器端渲染路由视图
react-router的更高级用法
会在下一篇文章来探讨。
毕竟哥也需要去深入研究一下才敢献丑。:joy::joy::joy:
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;
欢迎您订阅我们的技术周刊
我们会向您分享我们精心收集整理的，最新的行业资讯，技术动态，外文翻译，热点文章;
我们使用第三方邮件列表向您推送，我们不保存您的任何个人资料，注重您的隐私，您可以随时退订,
欢迎分享您的观点，经验，技巧，心得
让我们一起找寻程序员的快乐，探索技术, 发现IT人生的乐趣;
本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG，请即时告知我们： ourjs(
订阅邮件周刊
history.js 一个无刷新就可改变浏览器栏地址的插件（不依赖jquery）
注意 转载须保留原文链接，译文链接，作者译者等信息。&&
示例： 简介HTML4有一些对浏览历史的前进后退API的支持如：window.history.back();window.history.forward();window.history.go(-1);window.history.go(1);HTML5浏览器新添加了不刷新改变网址地址的API：var currentState = history.var stateObj = { foo: "bar" };window.history.pushState(stateObj, "page 2", "bar.html");这些API构建单页面无刷新网站是十分有帮助的，很可惜他们在老浏览器中无法使用。history.js可以解决这个问题。History.js优雅地支持所有浏览器的History/State的
API（pushState，replaceState，onPopState）。包括数据，title，replaceState。支持
jQuery，MooTools和Prototype。在HTML5浏览器，它使用原生API，可以直接修改URL，而无需再使用哈希值。对于HTML4
浏览器则使用Hash值进行兼容。代码示例(function(window,undefined){
// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
var State = History.getState(); // Note: We are using History.getState() instead of event.state
// Change our States
History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4"
History.back(); // logs {state:3}, "State 3", "?state=3"
History.back(); // logs {state:1}, "State 1", "?state=1"
History.back(); // logs {}, "Home Page", "?"
History.go(2); // logs {state:3}, "State 3", "?state=3"
})(window);
效果当在HTML5浏览器中时地址栏的变化
/?state=3当在HTML4浏览器中时地址栏的变化
/#?state=1&_suid=1
/#?state=2&_suid=2
/#?state=3&_suid=3
/#?state=4
/#?state=3&_suid=3
/#?state=1&_suid=1
/#?state=3&_suid=3项目地址：
&热门文章 - 分享最多
&相关阅读 - JS开源
&关键字 - 开源
&欢迎订阅 - 技术周刊
我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私，您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐，探索技术, 发现IT人生的乐趣;
我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊关于location.hash history.length的一个怪异现象？
```javascriptsetTimeout(function(){ console.log(window.history.length) location.hash = location.hash + 'sdf' console.log(window.history.length)})``````javascript console.log(window.history.length) location.hash = location.hash + 'sdf' console.log(window.history.length)```在页面刚加载的时候，第一种能location.hash变化后history.length也会增加。第二种就不会。完全看不出有什么区别
上面是Chrome 版本 51.0. m (64-bit) 的结果上面是Chrome 版本 51.0. m (64-bit) 的结果又试了下Edge 版本 25. 也是一样的结果之前隐约听说各浏览器在处理console.log的时候有很大的不同,试着在这个方向上考虑一下吧
如果你用timeline把这个过程记录下来查看的话，大概能发现什么。也许这就只是浏览器的一种设定而已，或者去看看规范？
已有帐号？
无法登录？
社交帐号登录hashchange和popstate的用法区别?
html5中history api 中增加了popstate事件，这个事件在hash发生变化时会触发； 且如果hashchange需要用到history state(指pushstate或replacestate的数据)，需要从popstate的event.state中获取，hashchange的event中并没有什么有用的属性； 所以hashchange有
hashchange和popstate的用法区别?
【hashchange和popstate的用法区别?】
请将本文分享给你的朋友：
hashchange和popstate的用法区别? 的相关文章
------分隔线----------------------------
北京联盟郑重声明：本文仅代表作者个人观点，与北京联盟无关。其原创性及文中陈述内容未经本站证实，北京联盟对本文及其中全部或者部分内容的真实性、完整性、及时性不作任何保证和承诺，请网友自行核实相关内容。}
我要回帖
更多推荐
- ·LOL是啥类型游戏什么游戏？
- ·请问电脑怎样下载侠盗飞车罪恶都市市电脑上怎么下载？
- ·英雄联盟lol猴子重做技能介绍换熊玩 或者永恒梦魇
- ·三国杀风林火山武将有哪些所有画师（标，风，火，林，山，将1，将2，sp，☆sp，国战）的QQ谁知，跪求！！！！！！！急急急！
- ·刺客信条兄弟会结尾字幕怎么跳过原版OPTIONS
- ·今年比去年的费用今年入账节约十分之一括号是单位1的量
- ·启德中学2016初级会计成绩查询年初1607班微信群号是多少
- ·气化炉发电不了的高沸点物质做气相对仪器有损伤吗
- ·患病一年的肾结石体外碎石危害男性患者已碎石两次哪，云南哪里治疗结石好？
- ·山东山东万智春季高考考注册入学今天出结果吗，万智学校是教春考的吗？
- ·研究生参军条件毕业参军条件？
- ·辽发改农经2015 488(2015)280号
- ·中药熟地怎样加工做丸药? 熟地湿糊糊妈妈讲故事的，怎样加工成粉末或其它形状，才能做丸药？
- ·椒江港湾花园飞霞港湾学区会不会重新划分
- ·易指标的k线买入信号指标和老师建议的能比吗？
- ·管胞与中心静脉导管类型管壁的加厚有哪些类型
- ·我爱家乡的作文摇橹人的作文
- ·华西医院华西心理咨询师培训龙江医生
- ·移动家教王激活码码
- ·地下室钢板止水带止水钢板梁有高差做法
- ·btree hash索引的区别history 与 browserhistory有什么区别
- ·多人宝物超级英雄转生宝物冲刺和终极冲刺有什么区别
- ·高中生留学去加拿大留学预科读预科怎么样
- ·海外留学生学历认证流程,学校不认可还能办吗?
- ·今年初三，但是不想读书了。 主要是孩子考不上高中怎么办，想去学技术可以不
- ·seo潭州学院vip课程真的好不好，我昨天报了vip，谁能告诉我?
- ·太康有郑州恒生会计培训班班吗
- ·国家临床医师成绩多少及格考试多少成绩及格14
- ·建筑企业资质升级流程的目的？
- ·我们的新型能源有哪些膨化机能节省能源50%，一年能为国家节省多少能源。
- ·BTL的1875btl功放电路图IC的两个放大器为什么不是并联的
- ·情系两岸中秋月圆人团圆作文
- ·孟州：孩子上高一，学习挺努力，还是都挺不懂，想找个辅导班
- ·香港两日一夜游攻略子空望月，千里团圆起相思.父母食饼犹难尽，遥知故乡月最明是什么意思
- ·“兵”字雨是怎么形成的50字?
- ·fenshen压力开关生产标准是哪个厂生产的
