淺談react-router HashRouter和BrowserRouter的使用
更新時間：2017年12月29日 10:11:25 作者：落草為寇的海帶王
本篇文章主要介紹了淺談react-router HashRouter和BrowserRouter的使用，具有一定的參考價值，有興趣的可以了解一下
官網(wǎng)推薦的是BrowserRouter，但是此方式需要服務(wù)器配合，而且有點不好的是重定向只能到首頁，無法停留在當(dāng)前頁，具體用法很簡單，舉例說明。
HashRouter
//react-router要求只只有一個字節(jié)點
//router內(nèi)部的Link和Route會一一匹配，匹配到則加載對應(yīng)的組件
//to 和 Route 的path是一樣的（除了/結(jié)尾）
//比如點擊關(guān)于我們to="/aboutUs"對應(yīng)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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Reducer是個純函數(shù)，即只要傳入相同的參數(shù)，每次都應(yīng)返回相同的結(jié)果。不要把和處理數(shù)據(jù)無關(guān)的代碼放在Reducer里，讓Reducer保持純凈，只是單純地執(zhí)行計算，這篇文章主要介紹了Redux拆分reducer函數(shù)流程2022-09-09
這篇文章主要為大家詳細介紹了React實現(xiàn)評論的添加和刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
解決React報錯Property?'value'?does?not?exist?on?
這篇文章主要為大家介紹了React報錯Property?'value'?does?not?exist?on?type?EventTarget的解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
react循環(huán)數(shù)據(jù)(列表)的實現(xiàn)
這篇文章主要介紹了react循環(huán)數(shù)據(jù)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
React Native中實現(xiàn)動態(tài)導(dǎo)入的示例代碼
隨著業(yè)務(wù)的發(fā)展，每一個 React Native 應(yīng)用的代碼數(shù)量都在不斷增加。作為一個前端想到的方案自然就是動態(tài)導(dǎo)入（Dynamic import）了，本文介紹了React Native中實現(xiàn)動態(tài)導(dǎo)入的示例代碼，需要的可以參考一下2022-06-06
關(guān)于react-router中的Prompt組件使用心得
這篇文章主要介紹了關(guān)于react-router中的Prompt組件學(xué)習(xí)心得,Prompt組件作用是,在用戶準(zhǔn)備離開該頁面時,?彈出提示,?返回true或者false,?如果為true,?則離開頁面,?如果為false,?則停留在該頁面，本文結(jié)合示例代碼介紹的非常詳細，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了從零開始學(xué)習(xí)搭建React腳手架項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了如何使用React實現(xiàn)圖片縮放的功能,文中的示例代碼講解詳細,具有一定的參考價值,感興趣的小伙伴可以了解下2023-10-10
下面小編就為大家?guī)硪黄獪\談react.js 之 批量添加與刪除功能。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
開發(fā)今天給我提了一個sql編輯器輸入框比較小，不支持放大，不太方便，下面看下我的處理方法，本文基于React+antd，給大家演示一個完整的全屏demo，感興趣的朋友一起看看吧2021-10-10