路由:
哈希路由(在url地址后加 #name)
// 實現頁面監聽 window.onhashchange = function(){ console.log(‘hash:’,window.location.hash) }
H5路由(history.pushState(‘起的名字’, ‘title字段’, ‘跳轉的地址’))
H5路由高級的地方就是可以跳轉一個hash值,也可以跳轉一個路徑,且跳轉路徑時頁面不會刷新
// 實現頁面監聽 window.onpopstate = function (e) { console.log(‘H5:’, window.location.pathname) }
還有一個特殊的 history.replaceState,它和 history.pushState 調用方式一樣。唯一的區別是pushState是在歷史記錄棧推送一條記錄,而replaceState是替換當前的歷史記錄棧,不會更改其他的歷史記錄。
React和路由相關的元素:
// 哈希路由 <HashRouter> // H5路由 <BrowserRouter> // 路由規則 <Route> // 路由選項 <Switch> // 跳轉導航 <Link> || <NavLink> // 自動跳轉 <Redirect>
絕對路徑的引用
相信很多童鞋在React中出現過引用過長的問題
舉個🌰: import Api from '../../../../Api'
這還只是其中一個文件,我們項目中有N多個文件,有些文件層次不一樣,這樣就很容易引起混亂(何況是我這樣的眼盲,數都數懵逼了ing...)
1、打開 webpack.config.dev.js & webpack.config.prod.js 文件
2、找到 alias 這個字段,在其已有屬性字段下添加
// 絕對路徑的引用 '@': path.resolve(__dirname, '鏈接Scr的路徑'), // 這樣如果再調用Src下的Api文件的話,就可直接 import Api from '@/src'
// 少俠留步,如果還想偷懶,老衲也可以給你看看下面....
'
component': path.resolve(__dirname, '鏈接component的路徑,例:../src/component'),
ok,請少俠重啟服務運行下試試,是不是突然感到 菊花一緊 眼睛一亮 ?這樣寫的話就很方便了有木有?寫法統一,易於理解,也不用費勁一層一層網上扒了。( 此處應該有掌聲... )
等等,也許有些用create-react-app創建項目的少俠看到這里才突然發現。我曹。我特么 webpack.config.dev.js & webpack.config.prod.js 文件呢?
少俠莫急
如果用create-react-app創建的項目,這兄弟倆默認是藏在 node_modules 下的 script-react 里面,這時候少俠又納悶了,這么多文件我該怎么找?
少俠請附耳過來,老衲教少俠一句咒語。
npm run eject
少俠請看根目錄是不是多了一個config文件?這哥倆就在這里藏着呢,去大膽配置吧。
安裝Eslint時候拋出警告
Eslint大家應該都熟悉,可是在React項目在安裝Eslint的時候總是拋出一個警告,雖然無關緊要,但是在不少強迫症騷年的眼里簡直要命呀。
Definition for rule 'jsx-a11y/href-no-hash' was not found jsx-a11y/href-no-hash(就是這廝)
npm install --save-dev eslint-config-airbnb eslint@^2.9.0 eslint-plugin-jsx-a11y@^1.2.0 eslint-plugin-import@^1.7.0 eslint-plugin-react@^5.0.1
好了,后續還有一系列小紀會分享給大家,如果對各位少俠有所幫助,請關注本微博,或者關注本人的個人公眾號,如果有什么問題,也歡迎大家發私信給我。