hashHistory and browserHistory in React-Router

hashHistory and browserHistory are two kinds of common React-Router Histories implementations.
When I was using React-Router v1.0, I read the doc in github and wrote the code like this

import { Router} from 'react-router'
ReactDOM.render ((
 <Router>
   ...
), document.body);

I found something in url like #/home/k=ckuvupr. What the hell is this?
I went back to the doc and changed the code with browserHistory. With the doc, I knew the default implementation ishashHistory, which will make a # -- hash in url.

import { browserHistory } from 'react-router'
ReactDOM.render ((
 <Router history={browserHistory} >
   ...
), document.body);

However, it would not effect in v1.0, it's the way in v2.0. So I didn't see anything changed. And just for a while, I forgot to deal with this, and went to write other codes.

Today when I c&p this chunk of code to my new project, using some new tools. The build tool automatically install react-router v2.0 for me. While the hash tag is gone, and url looks like the real url. But it cause another problem, that is when the url is like the real url, it means that I should set the server side route to /* -> index.html rather than / -> index.html.
Otherwise, it will get a 404 error when the url /home is re-flushed. And the problem will not raise while usinghashHistory, because the url is like /#/home and it is still /, the string after hash tag is not in the route rule. Docs about them.

I havn't find the correct way to set the server side route, because I am using a webpack-dev-server-like tool, I don't know how to change the route.
So I go back to use the ugly hashHistory.

It seems a waste of time, my fault is reading doc but not paid attention to version, but I still hate the doc because the difference between v1.0 and v2.0 is not heightlighted.

时间: 2025-01-29 21:28:13

hashHistory and browserHistory in React-Router的相关文章

React Router 使用教程

真正学会 React 是一个漫长的过程. 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系.想要发挥它的威力,整个技术栈都要配合它改造.你要学习一整套解决方案,从后端到前端,都是全新的做法. 举例来说,React 不使用 HTML,而使用 JSX .它打算抛弃 DOM,要求开发者不要使用任何 DOM 方法.它甚至还抛弃了 SQL ,自己发明了一套查询语言 GraphQL .当然,这些你都可以不用,React 照样运行,但是就发挥不出它的最大威力. 这样说吧,你只要用了 React,就会

[译] 关于 React Router 4 的一切

本文讲的是[译] 关于 React Router 4 的一切, 原文地址:All About React Router 4 原文作者:BRAD WESTFALL 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:undead25 校对者:sunui.LouisaNikita 关于 React Router 4 的一切 我在 React Rally 2016 大会上第一次遇到了 Michael Jackson,不久之后便写了一篇 an article on

React Router —— React.js 的路由解决方案

React Router 一个用于 React.js 的路由解决方案(routing solution).它轻松可以同步你的 app 和 URL,同时给嵌套,转换,和服务端渲染一流的支持. 特性: 嵌套视图映射到嵌套路由 模块化构建路由层级 同步和异步转移挂钩 转换中止/重定向/重试 动态 segments 查询参数 当 .active 类的路由活动时可以自动链接 Multiple root routes Hash 或 HTML5 历史 (含备份) URLs 声明重定向路由 声明未找到路由 浏览

react router-React Router 2.0 使用不成功,求大神解救

问题描述 React Router 2.0 使用不成功,求大神解救 最近学使用React和React的路由,但是第一个DEMO一直写不出来,现在报错是 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>react</title> <script src="libs/react-0.14.8/build/react-with-add

[译]Angular vs React:谁更适合前端开发

本文讲的是[译]Angular vs React:谁更适合前端开发, 原文地址:Angular vs. React: Which Is Better for Web Development? 原文作者:Brandon Morelli 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m- 译者:龙骑将杨影枫 校对者:Larry.薛定谔的猫.逆寒 大家总在写文章争论,Angular 与 React 哪一个才是前端开发的更好选择(译者:在中国还要加上 vue :P).我

Angular vs React 最全面深入对比

如今,Angular和React这两个JavaScript框架可谓红的发紫,同时针对这两个框架的选择变成了当下最容易被问及或者被架构设计者考虑的问题,本文或许无法告诉你哪个框架更优秀,但尽量从更多的角度去比较两者,尽可能的为你在选择时提供更多的参考意见. 选择的方法 在选择之前,我们尝试带着一些问题去审视你将要选择的框架(或者是任何工具),尝试用这些问题的答案来帮助我们更加了解框架,也更加让选择变得更容易 框架本身的问题: 是否成熟?谁在背后支持呢? 具备的功能? 采用什么架构和模式? 生态系统

使用 React.js 的渐进式 Web 应用程序:第 4 部分 - 渐进增强

本文讲的是使用 React.js 的渐进式 Web 应用程序:第 4 部分 - 渐进增强, 渐进增强 (Progressive Enhancement) 渐进增强 (Progressive Enhancement) 意味着所有人都可以在任意一款浏览器中访问页面的基本内容和功能,在那些不支持某些特性的浏览器中访问时,体验上有所退化但仍然是可用的. - Lighthouse 一个比较完善的 Web 应用要对它所面对的市场的大部分用户是可用的.如此,如果一个 Web 应用遵循弹性开发的理念,那么它可以

使用 React.js 的渐进式 Web 应用程序:第 2 部分 - 页面加载性能

本文讲的是使用 React.js 的渐进式 Web 应用程序:第 2 部分 - 页面加载性能, 系列第二篇,来看看基于 React 路由分块的页面加载优化. 原文地址:Progressive Web Apps with React.js: Part 2 - Page Load Performance 原文作者:Addy Osmani 译文出自:掘金翻译计划 译者:markzhai 校对者:Romeo0906,AceLeeWinnie 使用 React.js 的渐进式 Web 应用程序:第 2 部

React+Redux打造“NEWS EARLY”单页应用 一步步让你理解最前沿技术栈的真谛

之前写过一篇文章,分享了我利用闲暇时间,使用React+Redux技术栈重构的百度某产品个人中心页面.您可以参考这里,或者参考Github代码仓库地址. 这个工程实例中,我采用了厂内的工程构建工具-FIS,并贯穿了react+redux基本思想. 今天这篇文章给大家分享一个更加复杂,但是非常有趣的一个项目- News Early单页应用. 我把这个项目所有代码托管在了我个人Github之中,感兴趣的读者可以跟我探讨. 最近我发现,React Redux生态圈项目活跃.但是作品质量"良莠不齐&qu