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大家应该都熟悉，可是在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 [email?protected]^2.9.0 [email?protected]^1.2.0 [email?protected]^1.7.0 [email?protected]^5.0.1