震驚!不是謠言,居然是真的!

老標題當了哈哈,以前有個謠言說

程序員為什么喜歡寫技術博客,是因為沒有女朋友可以分享,但是實際上有女朋友你也不好分享,因為你看了一個新的技術,分享吧會感覺在裝逼,不分享吧,對不起我在這花費的心思。

所以,我默默的寫下這票技術博客

來源:https://reactrouter.com/web/guides/primary-components

react-router 的 BrowserHistory 和 hashHistory的去區(qū)別

主要的區(qū)別就是存儲url的方式和與web服務端通信的方式

  • browserHistory 使用常規(guī)的URL路徑的形式,也是外觀最好的形式。但是,需要服務端進行相應的配置,你必須將你的服務端路由配置正確的匹配到你每個路由對應的客戶端的組件。其實大家也不必太擔心,個人的開發(fā)經(jīng)驗告訴我,前后端分離開發(fā)的過程,存在兩種情況,
一種是服務端不需要你去開發(fā)和維護,你只要關注客戶端的路由入口,每個子路由對應的組件是什么即可。
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

function App() {
  return <h1>Hello React Router</h1>;
}

ReactDOM.render(
  <BrowserRouter>
    <App /> // 這里面你把你前端的路由匹配好就行
  </BrowserRouter>,
  document.getElementById("root")
);
第二種就是需要你去配置服務端的路由。這個也不難,一般來說我們只要一個入口,你只要匹配根路由即可。這個涉及到如何創(chuàng)建一個server有關,大家可以查詢node、nginx等服務端的配置都能找到詳細的解答
  • hashHistory 會把當前的位置存儲在hash路由中,因此它的URL看起來就像這樣 http://example.com/#/your/page. 由于hash路由的改變并不會想服務器發(fā)送請求,所以無需服務端配置。
題外話: 個人經(jīng)驗告訴我hashHistory會存在一些坑,比如微信分享、微信支付等,需要發(fā)送當前頁面的路由作驗證然后染回token才能去正常工作,但是微信會將你發(fā)送的頁面路由作截取操作,最經(jīng)典就是會截取掉你的hash路由。因此不得不做兼容工作去解決類似問題。
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容