路由:

哈希路由（在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

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

?

轉載于:https://www.cnblogs.com/icaihua/p/9869846.html

總結

以上是生活随笔為你收集整理的React路由 + 绝对路径引用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。