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.


目录
相关文章
|
4月前
|
移动开发 资源调度 前端开发
React Router V6 useRoutes的使用
【8月更文挑战第29天】 React Router V6 useRoutes的使用
174 3
|
4月前
|
前端开发 JavaScript UED
什么是 React Router?
【8月更文挑战第31天】
29 0
|
7月前
|
资源调度 前端开发 JavaScript
React Router:React应用的路由管理
【4月更文挑战第25天】React Router是React的官方路由库,用于管理SPA的路由。它基于组件,将URL映射到React组件,核心概念包括路由、链接和导航。设置路由时,在根组件中使用BrowserRouter或HashRouter,包裹Routes组件,定义Route规则。Link组件用于创建内部链接,实现导航。高级特性包括嵌套路由、参数化路由和编程式导航,如子路由、动态参数和JavaScript控制的导航。掌握React Router能帮助开发者更高效地构建复杂的React应用。
|
7月前
|
存储 资源调度 前端开发
React Router v6 完全指南(上)
React Router v6 完全指南(上)
381 0
|
7月前
|
前端开发 JavaScript API
React Router v6 完全指南(下)
React Router v6 完全指南(下)
254 0
|
缓存 移动开发 前端开发
【React】react-router 路由详解
【React】react-router 路由详解
334 1
【React】react-router 路由详解
|
前端开发
【react 中router v6 与 v5 区别】
【react 中router v6 与 v5 区别】
|
前端开发 网络架构
【React】React-router路由
React-router路由
112 0
|
前端开发 JavaScript API
react-router与react-router-dom区别
React 是一个流行的JavaScript库,用于构建用户界面,而`React Router`是为 React 应用程序提供路由功能的常用解决方案之一。 React Router是一个用于构建路由的库,它提供了核心的API,例如`Router`、`Route`和`Switch`。它允许开发者将不同的组件与特定的URL路径相关联,并根据用户的导航选择加载相应的组件。React Router通过管理URL的变化,帮助我们在单页应用程序中实现导航和路由。 然而,React Router本身并没有提供直接操作DOM进行路由跳转的API。这就是`React Router DOM`的出现背景。
316 0