欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談react-router HashRouter和BrowserRouter的使用

 更新時(shí)間：2017年12月29日 10:11:25   作者：落草為寇的海帶王  
本篇文章主要介紹了淺談react-router HashRouter和BrowserRouter的使用，具有一定的參考價(jià)值，有興趣的可以了解一下

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

HashRouter

//react-router要求只只有一個(gè)字節(jié)點(diǎn)
//router內(nèi)部的Link和Route會(huì)一一匹配，匹配到則加載對(duì)應(yīng)的組件
//to 和 Route 的path是一樣的（除了/結(jié)尾）
//比如點(diǎn)擊關(guān)于我們to="/aboutUs"對(duì)應(yīng)path="/aboutUs/"，這樣它就去加載AboutUs這個(gè)組件，其他組件沒(méi)加載
//相比用state和回調(diào)實(shí)現(xiàn)，這種方式更為簡(jiǎn)單明了，而且瀏覽前進(jìn)后退功能都支持
<HashRouter>
  <div id="wrapper">
    <Header />
    <ul className="nav navbar-nav">
      <li><Link to="/">首頁(yè)</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/

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • Redux模塊化拆分reducer函數(shù)流程介紹

    Redux模塊化拆分reducer函數(shù)流程介紹

    Reducer是個(gè)純函數(shù)，即只要傳入相同的參數(shù)，每次都應(yīng)返回相同的結(jié)果。不要把和處理數(shù)據(jù)無(wú)關(guān)的代碼放在Reducer里，讓Reducer保持純凈，只是單純地執(zhí)行計(jì)算，這篇文章主要介紹了Redux拆分reducer函數(shù)流程
    2022-09-09
  • React實(shí)現(xiàn)評(píng)論的添加和刪除

    React實(shí)現(xiàn)評(píng)論的添加和刪除

    這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)評(píng)論的添加和刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-10-10
  • 解決React報(bào)錯(cuò)Property?'value'?does?not?exist?on?type?EventTarget

    解決React報(bào)錯(cuò)Property?'value'?does?not?exist?on?

    這篇文章主要為大家介紹了React報(bào)錯(cuò)Property?'value'?does?not?exist?on?type?EventTarget的解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-12-12
  • react循環(huán)數(shù)據(jù)(列表)的實(shí)現(xiàn)

    react循環(huán)數(shù)據(jù)(列表)的實(shí)現(xiàn)

    這篇文章主要介紹了react循環(huán)數(shù)據(jù)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • React Native中實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入的示例代碼

    React Native中實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入的示例代碼

    隨著業(yè)務(wù)的發(fā)展，每一個(gè) React Native 應(yīng)用的代碼數(shù)量都在不斷增加。作為一個(gè)前端想到的方案自然就是動(dòng)態(tài)導(dǎo)入（Dynamic import）了，本文介紹了React Native中實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入的示例代碼，需要的可以參考一下
    2022-06-06
  • 關(guān)于react-router中的Prompt組件使用心得

    關(guān)于react-router中的Prompt組件使用心得

    這篇文章主要介紹了關(guān)于react-router中的Prompt組件學(xué)習(xí)心得,Prompt組件作用是,在用戶準(zhǔn)備離開該頁(yè)面時(shí),?彈出提示,?返回true或者false,?如果為true,?則離開頁(yè)面,?如果為false,?則停留在該頁(yè)面，本文結(jié)合示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下
    2023-01-01
  • 從零開始學(xué)習(xí)搭建React腳手架項(xiàng)目

    從零開始學(xué)習(xí)搭建React腳手架項(xiàng)目

    這篇文章主要介紹了從零開始學(xué)習(xí)搭建React腳手架項(xiàng)目，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-08-08
  • React實(shí)現(xiàn)圖片縮放的示例代碼

    React實(shí)現(xiàn)圖片縮放的示例代碼

    這篇文章主要為大家詳細(xì)介紹了如何使用React實(shí)現(xiàn)圖片縮放的功能,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴可以了解下
    2023-10-10
  • 淺談react.js 之 批量添加與刪除功能

    淺談react.js 之 批量添加與刪除功能

    下面小編就為大家?guī)?lái)一篇淺談react.js 之 批量添加與刪除功能。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-04-04
  • React實(shí)現(xiàn)組件全屏化的操作方法

    React實(shí)現(xiàn)組件全屏化的操作方法

    開發(fā)今天給我提了一個(gè)sql編輯器輸入框比較小，不支持放大，不太方便，下面看下我的處理方法，本文基于React+antd，給大家演示一個(gè)完整的全屏demo，感興趣的朋友一起看看吧
    2021-10-10

最新評(píng)論