初学react之踩过的坑

最近没事学习了下react,虽然只是简单的接触下,但还是碰到不少问题

问题1:路由的active状态

文档上写的是Link标签里面添加activeClassName或者activeStyle就可以了

然后发现添加以后并没有什么卵用

最后发现是react-router的版本问题,我用的是4.0

而4.0已经更新为NavLink,这样就可以起作用了

问题2:打包问题

项目打包的时候也出现了许多问题

首先打包后页面出现空白,没有任何内容,是因为打包路径的问题

我们需要修改package.json,添加如下内容即可


第二个问题就是history的问题,我们知道react-router是基于history的,所以我们写项目的时候需要添加history,但是我们需要知道的是browserHistory是需要部署服务器的,所以如果我打包后在本地运行router是会报错的,那我们就不能在本地运行了吗?当然不是,如果在本地运行的话我们可以使用HashRouter

还有最后一个问题就是serviceworker的问题,这是为了加快渲染react的速度而创建的,但这个只能用于开发环境,当我们打包的时候需要删掉,要不然打包的时候会报错

总结

需要注意版本问题。版本的更新会改变一些方法和标签,所以我们学习的时候一定要注意自己的版本,然后去找相应版本的文档介绍。

参考链接:

react-router:http://react-guide.github.io/react-router-cn/docs/API.html

react-router 4.0:https://reacttraining.com/react-router/web/guides/philosophy

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,846评论 25 708
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 PS:转载请注明出处作者:TigerChain地址:http...
    TigerChain阅读 23,010评论 3 49
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,837评论 18 139
  • Lesson11、首先确保安装了Node.js和npm依赖包管理工具2、在git上克隆官方示例程序 git clo...
    冰_心阅读 2,731评论 0 16
  • 庭台楼榭, 灰瓦白墙, 古石桥下碧水蜿蜒, 静静地流淌, 一串串红灯笼参差在烟雨长廊, 湿漉漉的青石板铺满狭长的小...
    高亮赶水阅读 203评论 0 0