react-router hashhistory 与 browserhistory有什么区别

本文介绍了React Router中hashHistory和browserHistory的区别。使用hashHistory时,浏览器不会因URL中#符号后的变化发送请求,由react - router根据URL渲染模块;使用browserHistory时,浏览器会发送请求,需server端特殊配置,如express和nginx。还提到可用外部history模块让URL更简洁。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, hashHistory } from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Router>
), document.getElementById('app'))

使用 hashHistory,浏览器上看到的 url 会是这样的: /#/repos?_k=adseis

使用 browserHistory,浏览器上看到的 url 会是这样的:/repos

看起来当然 browserHistory 很好很理想,但 browserHistory 需要 server 端支持。 而使用hashHistory的时候,因为 url 中 # 符号的存在,从 /#/ 到 /#/repos 浏览器并不会去发送一次 request,react-router 自己根据 url 去 render 相应的模块。

而使用 browserHistory 的时候,浏览器从 / 到 /repos 是会向 server 发送 request 的。所以 server 端是要做特殊配置的。比如用的 express 的话,你需要 handle 所有的路由 app.get('*', (req, res) => { ... }),使用了 nginx 的话,nginx也要做相应的配置。

如果只是想去掉 ?_k=adseis 这样的字符串的话,可以使用外部的 history 模块。

import { createHashHistory } from 'history';

const appHistory = useRouterHistory(createHashHistory)({ queryKey: false });

ReactDOM.render(
  <Router history={appHistory}>
    {routes}
  </Router>,
  document.getElementById('app')
);

这样子,url 会稍微干净点,但 hash 还在,/#/repos

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值