淺談react-router HashRouter和BrowserRouter的使用
更新時間：2017年12月29日 10:11:25 作者：落草為寇的海帶王
本篇文章主要介紹了淺談react-router HashRouter和BrowserRouter的使用，具有一定的參考價值，有興趣的可以了解一下
官網(wǎng)推薦的是BrowserRouter，但是此方式需要服務(wù)器配合，而且有點(diǎn)不好的是重定向只能到首頁，無法停留在當(dāng)前頁，具體用法很簡單，舉例說明。
HashRouter
//react-router要求只只有一個字節(jié)點(diǎn)
//router內(nèi)部的Link和Route會一一匹配，匹配到則加載對應(yīng)的組件
//to 和 Route 的path是一樣的（除了/結(jié)尾）
//比如點(diǎn)擊關(guān)于我們to="/aboutUs"對應(yīng)path="/aboutUs/"，這樣它就去加載AboutUs這個組件，其他組件沒加載
//相比用state和回調(diào)實(shí)現(xiàn)，這種方式更為簡單明了，而且瀏覽前進(jì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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
webpack+react+antd腳手架優(yōu)化的方法
本篇文章主要介紹了webpack+react+antd腳手架優(yōu)化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
本文主要介紹了React 實(shí)現(xiàn)表單組件的示例代碼,支持包括輸入狀態(tài)管理,表單驗(yàn)證,錯誤信息展示,表單提交,動態(tài)表單元素等功能,具有一定的參考價值,感興趣的可以了解一下2024-07-07
react-router v4如何使用history控制路由跳轉(zhuǎn)詳解
這篇文章主要給大家介紹了關(guān)于react-router v4如何使用history控制路由跳轉(zhuǎn)的相關(guān)資料，文中通過示例代碼介紹的的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
useCallback是react中比較重要的一個hook，useCallback 用來返回一個函數(shù)，在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用2022-11-11
當(dāng)涉及到React框架時,了解受控組件和非受控組件是非常重要的概念,本文主要介紹了理解react中受控組件和非受控組件及應(yīng)用場景,具有一定的參考價值,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了React中使用Vditor自定義圖片詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
react同構(gòu)實(shí)踐之實(shí)現(xiàn)自己的同構(gòu)模板
這篇文章主要介紹了react同構(gòu)實(shí)踐之實(shí)現(xiàn)自己的同構(gòu)模板，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
本篇文章主要介紹了React Native之TextInput組件解析示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
本文全面介紹了在React中處理異步操作的方法、最佳實(shí)踐及常見坑點(diǎn),涵蓋數(shù)據(jù)獲取、延時任務(wù)、用戶交互、動畫和效果等典型場景,并提供了如useEffect、AbortController、ReactQuery等具體實(shí)現(xiàn)示例,感興趣的朋友一起看看吧2025-03-03
詳解React中setState回調(diào)函數(shù)
這篇文章主要介紹了詳解React中setState回調(diào)函數(shù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06