React小记

2018-10-29 15:27:26来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

路由:

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

好了,后续还有一系列小纪会分享给大家,如果对各位少侠有所帮助,请关注本微博,或者关注本人的个人公众号,如果有什么问题,也欢迎大家发私信给我。

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:iview“官方“实现的右键菜单

下一篇:为什么计时器计时不准?---了解计时器的底层机制