React路由 + 絕對路徑引用


路由:

哈希路由(在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(就是這廝)

問題起因是 eslint-config-airbnb 需要特定版本的插件,所以不能默認安裝這些插件的最新版本。安裝的時候直接運行下面這個命令即可:
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

好了,后續還有一系列小紀會分享給大家,如果對各位少俠有所幫助,請關注本微博,或者關注本人的個人公眾號,如果有什么問題,也歡迎大家發私信給我。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM