無業可守 創新圖強
living innovation

天9國際網站登錄

當前位置:首頁 > 天9國際網站登錄 >

react-router-dom和本地服務本地開發 (node、webpack)

日期:2019-07-16

場景

使用react 做開發,避免會使用react-router

React Router 已經是V4的版本

React Router 目前已經被劃分成了三個包:react-router,react-router-dom, react-router-native。React Router 應用提供了核心的路由組件和函數,另外兩個包提供了特定環境的組件(瀏覽器和 react-native 對應的平臺),不過他們也是將 react-router 導出的模塊再次導出。

### 本文核心要講的就是react-router-dom 和 本地服務的故事

react-router-dom作為瀏覽器的平臺,是我們的做WEB首選。react-router-dom可以選擇 <BrowserRouter><HashRouter> 組件

<BrowserRouter> 應該用在服務器處理動態請求的項目中(知道如何處理任意的URI)<HashRouter> 用來處理靜態頁面(只能響應請求已知文件的請求)。

假如有一個 Link 標簽,點擊后跳轉到 /test/guide。

BrowserRouter: http://localhost:8080/test/guideHashRouter: http://localhost:8080/#/test/guide

通常來說更推薦使用

關于本地服務

現如今,前端開發避免不了本地服務開發,大多數會選擇node做本地服務開發層,其中包括了koa,express。webpack做本地服務webpack-dev-server(也是一個express的服務)有本地服務就避免不了本地路由。本地服務的get URL請求如何和react-router做適配呢?請往下看。

關于HashRouter 和本地服務

HashRouter做本地開發,主要是 hash 地址,hash 地址就是指 # 號后面的 url。這個功能只會實現靜態頁面的跳轉,不會產生路由的變化如上面例子HashRouter: http://localhost:8080/#/test/guide,對于服務端而言,路由實際還是再根目錄下"/" ,而“#/test/guide” 只是hash地址,可以通過瀏覽器location 命令查看因為對于服務端而言,路由實際上沒有發生GET請求變化,以至于服務端不會發生響應,也不會存在Cannot GET頁面提示404等問題。

其中如果是webpack服務,關于設置historyApiFallback:true 網上有很多的文章,給了這個答案,來處理本地服務問題

首先 #### devServer.historyApiFallback 用來應對返回404頁面時定向到特定頁面用的

如果你在webpack配置文件中修改了 output.publicPath 值默認為"/",那么你就需要聲明請求重定向,配置historyApiFallback.index 值。

// output.publicPath: "/assets/"historyApiFallback: { index: "/assets/"}

關于BrowserRouter 和本地服務由上面的例子BrowserRouter: http://localhost:8080/test/guide,可見,使用BrowserRouter,history對url鏈接進行了處理,當鏈接跳轉之后,如果對頁面進行刷新reload操作,那么本地服務就會捕獲到路由的GET請求,這就是問題的關鍵,需要本地服務對請求進行處理,方式有很多,這里介紹一種比較籠統直接的方式;

const router = express.Router();const request = require("request-promise").defaults({ jar: true });router.all("*", async (req, res, next) => { let url = req.url; //頁面鏈接上的url let html = ""; // 不匹配以下路由規則,只匹配URL GET請求 if (url.match(/.(png|jpe?g|gif|js|css|html|ico)/)) { return next(); } html = await reactRoute().catch(e => { //do error handle return false; }); if(html){ return res.send(html); } //其他路由處理規則... return next();})async function reactRoute() { return new Promise((resolve, reject) => { //這里可以做一層非react項目的過濾,這里不重要 // if(noReact){ // reject("no react url") // } let html = await request({ method: "get", url: `http://localhost:8080/pages/index.html` //本地服務index路徑(為react配置的BrowserRouter路徑),因項目而異,只是一個例子 }).catch(e => { reject(e); }); resolve(html); })}

以上代碼的邏輯是,本地服務,讀取URL get請求,如果本地服務請求404,那么把react 的BrowserRouter 啟動文件返回,該文件應該是本地服務可以讀取到的html文件。以下是圖解

广东麻将规则