首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么我可以使用hashHistory直接在地址栏中输入URL,而不能使用browserHistory?

hashHistory和browserHistory是React Router库中的两种路由模式。

hashHistory使用URL的hash部分(即#后面的内容)来作为路由的标识,可以通过在地址栏中输入URL的hash部分来直接切换路由。例如,可以通过在地址栏中输入http://example.com/#/about来切换到关于页面。

browserHistory使用HTML5的history API来管理路由,可以通过在地址栏中输入完整的URL来切换路由。例如,可以通过在地址栏中输入http://example.com/about来切换到关于页面。

为什么可以使用hashHistory直接在地址栏中输入URL,而不能使用browserHistory呢?

这是因为使用browserHistory需要服务器端的支持。当使用browserHistory时,当用户在地址栏中输入URL时,浏览器会向服务器发送请求,服务器需要配置相应的路由规则,以便正确地响应这个URL。如果服务器没有正确配置这些路由规则,或者没有处理这些URL的能力,那么当用户在地址栏中输入URL时,服务器将无法正确响应,导致页面无法加载。

相比之下,hashHistory不需要服务器端的支持。因为hash部分的内容不会被发送到服务器,所以服务器不需要配置相应的路由规则。当用户在地址栏中输入URL时,浏览器只会解析URL的hash部分,并根据hash部分来切换路由,页面的加载和渲染完全由前端来控制。

综上所述,使用hashHistory可以直接在地址栏中输入URL,而不需要服务器端的支持。而使用browserHistory则需要服务器端的支持,需要正确配置相应的路由规则,以便正确响应URL的请求。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React Router基础教程

的render方法,就可以使用相关的组件了 3....有三种: browserHistory:通过URL的变化改变路由,是推荐的一种方式,但是需要在服务器端需要做一些配置(窝目前还不知怎么配) hashHistory:通过#/ ,其实就像是单页面应用中常见的...(使用简单,这里暂且就用这种方式) createMemoryHistory:Memory history 并不会从地址栏操作或是读取,它能够帮助我们完成服务器端的渲染,我们得手动创建history对象...然后,在容器中使用Route组件定义各个路由,通过path指定路径(可以看到,是不区分大小写的),通过component指定该路径使用的组件 也可以接在Router容器上直接用routes属性定义各个路由...在路径"/"下我们看到的是空白页面,可以添加默认的页面组件用于导航 Link: 可以认为它是标签在React的实现,使用to属性定义路径,还可以通过activeClass或activeStyle

96420

React Router 邦邦两拳🥊 🥊

---- 这是参与11月更文挑战的第16天,活动详情查看:2021最后一次更文挑战」 简介 React Router 是一个基于 React 之上的强大路由库,它可以让你向应用快速地添加视图和数据流...BrowserRouter 常规URL HashRouter 将当前位置存储在URL的哈希部分,因此URL总会有个#井号,新建的项目大部分是使用这种路由器的。...to 替代了 href属性,接收跳转的路径 About 如果希望当前路由 样式与其他不同 使用activeStyle,直接在标签内添加样式 <Link...简而言之,一个 history 知道如何去监听浏览器地址栏的变化, 并解析这个 URL 转化为 location 对象, 然后 router 使用它匹配到路由,最后正确地渲染对应的组件。...1.hashHistory 路由将通过URL的hash部分(#)切换,URL的形式类似example.com/#/some/path import { hashHistory } from 'react-router

3.4K20

hashHistorybrowserHistory 的区别

{hashHistory} /> browserHistory hashHistory createMemoryHistory 官方推荐使用browserHistory 使用hashHistory,浏览器的...使用hashHistory时,因为有 # 的存在,浏览器不会发送request,react-router 自己根据 url 去 render 相应的模块。...如果只是静态页面,就不需要用browserHistory,直接hashHistory就好了。 react router为什么推荐使用browserHistory不推荐hashHistory?...首先 browserHistory 其实使用的是 HTML5 的 History API,浏览器提供相应的接口来修改浏览器的历史记录; hashHistory 是通过改变地址后面的 hash 来改变浏览器的历史记录... History API 需要服务端支持,这样服务端能获取请求细节。 还有一个原因是因为有些应该会忽略 URL 的 hash 部分,记得之前将 URL 使用微信分享时会丢失 hash 部分。

1.7K20

ReactRouter知识点

简而言之,一个 history 知道如何去监听浏览器地址栏的变化, 并解析这个 URL 转化为 location 对象, 然后 router 使用它匹配到路由,最后正确地渲染对应的组件。...常用的 history 有三种形式, 但是你也可以使用 React Router 实现自定义的 history。...browserHistory hashHistory createMemoryHistory Memory history 不会在地址栏被操作或读取。这就解释了我们是如何实现服务器渲染的。...这里理解的无状态就是o keep your UI in sync with the URL....StaticRouter不需要保持UI同步(以浏览器来说,我们的url变化,UI对应更新,但可能是局部的,会保留部分状态),由于服务端是无状态的,只要拿到对应的组件渲染出HTML扔给客户端就行 这是的理解

1.6K30

从vue-router源码中看前端路由的两种实现

最后分析了如何实现可以直接从文件系统加载不借助后端服务器的Vue单页应用。 随着前端应用的业务功能越来越复杂、用户对于使用体验的要求越来越高,单页应用(SPA)成为前端应用的主流形式。...监听地址栏 以上讨论的VueRouter.push()和VueRouter.replace()是可以在vue组件的逻辑代码中直接调用的,除此之外在浏览器,用户还可以接在浏览器地址栏输入改变路由,因此...在HTML5History添加对修改浏览器地址栏URL的监听是直接在构造函数执行的: constructor (router: Router, base: ?...URL pushState设置的新URL可以与当前URL一模一样,这样也会把记录添加到栈hash设置的新值必须与原来不一样才会触发记录添加到栈 pushState通过stateObject可以添加任意类型的数据到记录...Ajax完成,不会根据URL重新请求页面,但是难免遇到特殊情况,比如用户直接在地址栏输入并回车,浏览器重启重新加载应用等。

1.7K30

react+redux+webpack教程4

Router组件只需要一个history属性,让我们可以选择使用哪种历史管理方式。 我们常用的就是browserHistoryhashHistory。...browserHistory就是我们最熟悉的浏览器管理历史, 使用这种历史管理方式感觉上跟普通浏览网页的方式一样:url路径会随着跳转及前进、后退按钮变化, 但是在react-router的browserHistory...hashHsitory只控制url#号后面的部分,这是前一段时间单页应用比较通用的方式,但是随着HTML5的普及, 这个方式有逐渐被淘汰的趋势。这里我们使用browserHistory。...一个很重要的原因就是网站不同于app,它要保证输入任何一个有效的url后都要给用户呈现出一个可用的页面。...简洁,把原来的newslist改成了news,news后面加斜杠id的形式作为新闻详情。

1.8K100

捕获用户在该页面停留的时长,是这样做的(前端监测)

单页面应用的路由跳出,但是基于 H5的History API(browserHistory) 和 Hash(hashHistory)实现的。...browserHistory 单页面的browserHistory路由是基于H5的History API实现的,我们只要监听popstate就可以知道,点击前进后退按钮改变的url变化,表url发生变化...hashHistory hashHistory就简单得不行了,直接监听hashchange就行 window.addEventListener('hashchange',()=>{ let t =...明明把它设置为hash路由了,为什么还会触发History API?...原来它们都是调用了 History API实现,这就解开了为什么它会触发自定义事件的原因了。 看源码指引? 如果你不相信,比比的话,可以自行看看源码。 ?

3.8K41

Vue路由实现原理

, "", url) 替换掉一条记录 其中pushState方法和replaceState方法可以分别增加和替换掉一条记录(必须同源),不会重新加载页面。...,当路由变化时,调用了Hitory的this.cb方法,this.cb方法是通过History.listen(cb)进行设置的,回到VueRouter类定义,找到了在init()对其进行了设置:...监听地址栏 上面的VueRouter.push()和VueRouter.replace()是可以在vue组件的逻辑代码中直接调用的,除此之外在浏览器,用户还可以接在浏览器地址栏输入改变路由,因此还需要监听浏览器地址栏中路由的变化...=> { replaceHash(route.fullPath) }) }) } 该方法设置监听了浏览器事件hashchange,调用的函数为replaceHash,即在浏览器地址栏中直接输入路由相当于代码调用了...监听地址栏 在HTML5History添加对修改浏览器地址栏URL的监听popstate是直接在构造函数执行的: constructor (router: Router, base: ?

1.2K30

React Router核心依赖--history库

为了标示页面发生的变化,方便刷新后依然能显示正确的页面元素,一般会通过改变url的hash值来唯一定位页面。但这会带来另一个问题:用户无法使用前进/后退来切换页面。...当页面的url或者hash发生变化的时候,浏览器会自动将新的url push到history对象。history对象内部会维护一个state数组,记录url的变化。...它本质上做了以下4件事情: 借鉴HTML5 history对象的理念,在其基础上又扩展了一些功能 提供3种类型的history:browserHistoryhashHistory,memoryHistory...) { ... } 从对比可以看出,两者的关系是非常密切的,history库可以说是history对象的超集,是功能更强大的history对象。...最后,我们再来回顾一下history库做了哪些事情: 借鉴HTML5 history对象的理念,在其基础上又扩展了一些功能 提供3种类型的history:browserHistoryhashHistory

85220

react-router 路由三种传值方法

router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: 首先定义路由到UserPage页面 import { Router,Route,hashHistory}...this.props.params.data); var {id,name,age} = data; 复制代码 通过这种方式跳转到UserPage页面时只能通过传递字符串来传递参数,那么是否有其他方法来优雅地直接传递对象不仅仅是字符串呢...2、query query方式使用很简单,类似于表单的get方法,传递参数为明文: // 定义路由 Route>...} = data; 复制代码 query方式可以传递任意类型的值,但是页面的URL也是由query的值拼接的,URL很长,那么有没有办法类似于表单post方式传递数据使得传递的数据不以明文传输呢?...可以在实现后对比地址栏URL来观察三种传值方式URL的区别 参考 react-router官方文档 阮一峰 blog

1.8K20

腾讯新闻React同构出优化实践

为什么出 就是为了“性能”!!! 按照经验来说,出,能够减少20% - 50%不等的首屏时间,因此尽管增加一定维护成本,前端们还是前赴后继地在搞出。...为什么选择腾讯新闻 并非腾讯新闻的业务相关方,可以比较大胆地作为例子使用 腾讯新闻页面更为丰富,可以做更多场景的实践 验证全套脱胎手Q家校群react的优化策略、实践方案和开发工具 由于只是实验,数据都是拉取腾讯新闻现网提供的...这次同构出实践,我们使用的是脱胎于手Q家校群的react start kit,名曰steamer-react。目前可以试用。...改用plugin('requestSync')不是require。...服务端的生命周期只走到componentWillMount,客户端则会有完整的生命周期,因此部份事件可以挪到componentDidMount处理。

2.2K50

React 进阶 - React Router

# React 路由原理 BrowserHistory 模式 改变路由 通过调用 api 实现的路由跳转,如在 React 应用调用 history.push 改变路由,本质上是调用 window.history.pushState...null path:新的网址,必须与当前页面处于同一个域,浏览器的地址栏将显示这个地址 window.history.replaceState history.replaceState(state,...模式下的 history 库就是基于上面改变路由,监听路由的方法进行封装处理,最后形成 history 对象,并传递给 Router HashHistory 模式 改变路由 window.location.hash...Router ,而是使用 React-Router-DOM BrowserRouter 或者 HashRouter ,两者关系就是 Router 作为一个传递路由和更新路由的容器 BrowserRouter...props ,但是无法传递父组件的信息 render 形式:Route 组件的 render 属性,可以接受一个渲染函数,函数参数就是路由信息,可以传递给页面组件,还可以混入父组件信息 children

1.8K21

是如何开发一款属于自己的chrome网站黑名单插件

那些曾经访问过且证明没有任何意义的网页,会因为一个“优秀的”标题导致再次浪费我们的时间。所以为什么我们不能拉黑它们呢?...市面上的Chrome网站黑名单不少,比如有 UblackList,这个网站只能解决在搜索过程不被检索到的黑名单。而且如果是想屏蔽某一个具体的网页,不是整个网站,则需要单独加到黑名单。...所以,开始向ChatGPT提出的需求 于是给出了以下这些对话 ] 当我一步一步按照它给我的步骤来实现时。前面还是挺顺的。 首先是添加方式。直接在这里就能添加了 刚开始的时候。...当浏览器输入地址栏时去匹配。 看到有其他Chrome插件能直接导出导入数据,但是在Chrome的extends里确实没看到文件。有大佬知道Chrome插件的数据保存在哪里的可以方便告知一下。...那应该就可以上架Chrome商店给大家使用了 相关代码地址在 https://github.com/youzeliang/chrome

54721

攻克的技术难题: 是如何解决开发Chrome插件问题

那些曾经访问过且证明没有任何意义的网页,会因为一个“优秀的”标题导致再次浪费我们的时间。所以为什么我们不能拉黑它们呢?...市面上的Chrome网站黑名单不少,比如有 UblackList,这个网站只能解决在搜索过程不被检索到的黑名单。而且如果是想屏蔽某一个具体的网页,不是整个网站,则需要单独加到黑名单。...所以,开始向ChatGPT提出的需求 于是给出了以下这些对话 当我一步一步按照它给我的步骤来实现时。前面还是挺顺的。 首先是添加方式。直接在这里就能添加了 刚开始的时候。...当浏览器输入地址栏时去匹配。 看到有其他Chrome插件能直接导出导入数据,但是在Chrome的extends里确实没看到文件。有大佬知道Chrome插件的数据保存在哪里的可以方便告知一下。...解决完上面这条后,仍然需要利用快捷键来实现对地址栏的添加 如果解决完了上面这2个问题。那应该就可以上架Chrome商店给大家使用

1.5K51
领券