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.


目录
相关文章
|
5月前
|
移动开发 资源调度 前端开发
React Router V6 useRoutes的使用
【8月更文挑战第29天】 React Router V6 useRoutes的使用
237 3
|
5月前
|
前端开发 JavaScript UED
什么是 React Router?
【8月更文挑战第31天】
34 0
|
8月前
|
存储 资源调度 前端开发
React Router v6 完全指南(上)
React Router v6 完全指南(上)
407 0
|
8月前
|
前端开发 JavaScript API
React Router v6 完全指南(下)
React Router v6 完全指南(下)
278 0
|
缓存 移动开发 前端开发
【React】react-router 路由详解
【React】react-router 路由详解
352 1
|
前端开发
【react 中router v6 与 v5 区别】
【react 中router v6 与 v5 区别】
|
前端开发 网络架构
【React】React-router路由
React-router路由
121 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`的出现背景。
340 0
|
移动开发 JavaScript 前端开发
React-Router
React-Router
73 0