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

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