淺談react-router HashRouter和BrowserRouter的使用

NO IMAGE

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

HashRouter


//react-router要求只只有一個位元組點
//router內部的Link和Route會一一匹配,匹配到則載入對應的元件
//to 和 Route 的path是一樣的(除了/結尾)
//比如點選關於我們to="/aboutUs"對應path="/aboutUs/",這樣它就去載入AboutUs這個元件,其他元件沒載入
//相比用state和回撥實現,這種方式更為簡單明瞭,而且瀏覽前進後退功能都支援
<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">關於我們</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元件。

伺服器

以apache為例,.htaccess新增重寫規則。(需先開啟可重寫設定)


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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援指令碼之家。

您可能感興趣的文章:

React-router 4 按需載入的實現方式及原理詳解react-router JS 控制路由跳轉例項詳解升級react-router 4 踩坑指南React Router基礎使用深入理解[email protected] 使用和原始碼解析react-router4 巢狀路由的使用方法使用react-router4.0實現重定向和404功能的方法react-router中<Link/>的屬性詳解