快捷導航

淺談react-router HashRouter和BrowserRouter的使用

更新時間：2017年12月29日 10:11:25 作者：落草為寇的海帶王

本篇文章主要介紹了淺談react-router HashRouter和BrowserRouter的使用，具有一定的參考價值，有興趣的可以了解一下

官網(wǎng)推薦的是BrowserRouter，但是此方式需要服務(wù)器配合，而且有點不好的是重定向只能到首頁，無法停留在當前頁，具體用法很簡單，舉例說明。

HashRouter

//react-router要求只只有一個字節(jié)點
//router內(nèi)部的Link和Route會一一匹配，匹配到則加載對應的組件
//to 和 Route 的path是一樣的（除了/結(jié)尾）
//比如點擊關(guān)于我們to="/aboutUs"對應path="/aboutUs/"，這樣它就去加載AboutUs這個組件，其他組件沒加載
//相比用state和回調(diào)實現(xiàn)，這種方式更為簡單明了，而且瀏覽前進后退功能都支持
<HashRouter>
  <div id="wrapper">
    <Header />
    <ul className="nav navbar-nav">
      <li><Link to="/">首頁</Link></li>
      <li><Link to="/classifiedDisplay">分類展示</Link></li>
      <li><Link to="/boutiqueCase">精品案例</Link></li>
      <li><Link to="/aboutUs">關(guān)于我們</Link></li>
    </ul>
    <Route exact path="/" component={Home}/>
    <Route exact path="/classifiedDisplay/" component={TypeShow}/>
    <Route exact path="/boutiqueCase/" component={JpShow}/>
    <Route exact path="/aboutUs/" component={AboutUs}/>
    <Footer />
  </div>
</HashRouter>

BrowserRouter

前端

同上方代碼，只是把HashRouter換成了BrowserRouter組件。

服務(wù)器

以apache為例，.htaccess添加重寫規(guī)則。（需先開啟可重寫設(shè)置）

#配和react-router,自行忽略寫的比較low的正則
RewriteEngine on
RewriteRule classifiedDisplay$ http://www.yangqingcheng.xin/
RewriteRule boutiqueCase$ http://www.yangqingcheng.xin/
RewriteRule aboutUs$ http://www.yangqingcheng.xin/

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

webpack+react+antd腳手架優(yōu)化的方法
本篇文章主要介紹了webpack+react+antd腳手架優(yōu)化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
React 實現(xiàn)表單組件的示例代碼
本文主要介紹了React 實現(xiàn)表單組件的示例代碼,支持包括輸入狀態(tài)管理,表單驗證,錯誤信息展示,表單提交,動態(tài)表單元素等功能,具有一定的參考價值,感興趣的可以了解一下
2024-07-07
react-router v4如何使用history控制路由跳轉(zhuǎn)詳解
這篇文章主要給大家介紹了關(guān)于react-router v4如何使用history控制路由跳轉(zhuǎn)的相關(guān)資料，文中通過示例代碼介紹的的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
2018-01-01
React useCallback詳細使用教程
useCallback是react中比較重要的一個hook，useCallback 用來返回一個函數(shù)，在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用
2022-11-11
理解react中受控組件和非受控組件及應用場景
當涉及到React框架時,了解受控組件和非受控組件是非常重要的概念,本文主要介紹了理解react中受控組件和非受控組件及應用場景,具有一定的參考價值,感興趣的可以了解一下
2024-01-01
React中使用Vditor自定義圖片詳解
這篇文章主要介紹了React中使用Vditor自定義圖片詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-12-12
react同構(gòu)實踐之實現(xiàn)自己的同構(gòu)模板
這篇文章主要介紹了react同構(gòu)實踐之實現(xiàn)自己的同構(gòu)模板，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-03-03
React Native之TextInput組件解析示例
本篇文章主要介紹了React Native之TextInput組件解析示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
在React中正確處理異步操作的方法
本文全面介紹了在React中處理異步操作的方法、最佳實踐及常見坑點,涵蓋數(shù)據(jù)獲取、延時任務(wù)、用戶交互、動畫和效果等典型場景,并提供了如useEffect、AbortController、ReactQuery等具體實現(xiàn)示例,感興趣的朋友一起看看吧
2025-03-03
詳解React中setState回調(diào)函數(shù)
這篇文章主要介紹了詳解React中setState回調(diào)函數(shù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06