React-Router 4 的新玩意儿
上一个项目用的还是 2.6.1,转眼的功夫 4.0 都发布了,API 变化实在有点大,2.X那套东西不顶用了,老老实实重新看一遍文档,其中有几点需要注意的,拿出来说一说。
本文只讨论针对浏览器的应用,使用 react-router-dom(在react-router基础上封装了一些高级组件)进行说明。
- 关于BrowserRouter:
如果按照原来的使用方式,就掉进第一个坑里了:history不合法。
用 react-router-dom 中的 <HashRouter>组件代替原来的 <Router> 组件就可以了。
这是之前2.X版本处理浏览器路由的方式,4.0版本中推荐另一个组件:<BrowserRouter >
换上<BrowserRouter >之后会出现 2 个问题:
如果你不是通过服务器启动应用,因为chrome自身的安全机制,在本地环境下根本不能用chrome玩。这个不关键,我本地测试换个浏览器还不行么,本地起个服务器也不麻烦。
关键问题,刷新就是404。原因很简单,BrowserRouter 和 HashRouter 完全不同,前者利用H5的 history 接口,前台路由就是后台收到的路由,你点到其他页面一刷新,得,根本没这个文件,服务器也很无辜,到底让我渲染个啥?后台也可以简单的解决这个问题:甭管你请求的啥地址,我先把入口文件扔给你。node处理方式如下(需要express):
app.get('*',(request,response)=>{ response.sendFile(path.resolve(__dirname,'../index.html')) })
启动node服务器,通过本机服务器访问,完美解决上面两个问题。
(<MemoryRouter> 和 <StaticRouter> 分别是非浏览器环境和服务器端渲染用的,在此不做讨论。)
- BrowserRouter 里可以存在各种标签。
原来用惯了2.X的同志们,看到新文档的例子可能会发现这个问题:Router里边不是只能有Route么,怎么什么都有。是的,4.0中 Router 里可以存在各种标签。
- 导航连接<NavLink>:
看名字就是导航用的,主要用途就是区分激活的状态,激活时的样式。之前揉柔在Link里的。
- 只渲染第一个匹配的组件<Switch>:
一个路由可能同时匹配多个路径,在<Switch>中,只渲染匹配的第一个,其他的放弃。之前这是Router的默认行为,4.0中为什么不默认了呢?答:可以将多个Route组合到页面中。想一想,如果你就是想同时渲染多个组件而不只是第一个呢?很欣慰看到我在2.X中吐槽的问题得到了解决。4.0版本给我最大的感觉就是:他让浏览器更灵活的去渲染页面。
- <Route>的渲染方法:
<Route component>
<Route render>
<Route children>
component和之前2.X的方法相同。
render可以传个函数避免创建新的React element(内联渲染时使用避免不必要的重载)。
children使用方式与render一致,只不过无论路由是否匹配都会被渲染。
exact属性为 true 则需要路由完全匹配时才渲染组件(之前也是默认行为)。
- 三个重要对象:history,location,match
在 Route component 中,以 this.props.location 的方式获取,
在 Route render 中,以 ({ location }) => () 的方式获取,
在 Route children 中,以 ({ location }) => () 的方式获取,
History 和 match的获取方式类似。
React-Router 4 的新玩意儿的更多相关文章
- 最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)
请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...
- react router 4.0以上的路由应用
thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...
- 关于react router 4 的小实践
详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react ...
- React Router 4.x 开发,这些雷区我们都帮你踩过了
前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...
- React Router教程
React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-router-dom 应用于浏览 ...
- React Router API文档
React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...
- React Router 用法
React Router 用法 一.DEMO import React from "react"; import { HashRouter as Router, Route, Li ...
- React Router学习
React Router教程 本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...
- [Web 前端] React Router v4 入坑指南
cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...
- React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆
2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...
随机推荐
- 【转】JS判断SWF,JPG加载完毕、兼容(Activex,plugIn)所有浏览器
JS判断SWF,JPG加载完毕.兼容(Activex,plugIn)所有浏览器 这里主要说下监听SWF的加载. 网上流传已久的监听方法,只能在IE(Activex插件下)下实现.在使用plugin的浏 ...
- 老李分享:大数据测试之HDFS文件系统
poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478,咨询电话010-845052 ...
- JS的作用域浅谈
作为前端小白,总是对JS的作用域有点迷糊,这里稍微研究了一下分享出来,希望和我一样的小白可以学的一点 首先是一个经典的例子: var a=0,b=0; for (var i = 0; i < 1 ...
- CF #401 (Div. 2) C.Alyona and Spreadsheet (思维)
题意:给你n行m列的数组,和k次的询问,问从l行到r行是否存在一个非递增的列 思路:看到这道题的数据量我们就知道直接暴力不可取,所以我们采用了预处理的方法,我们记录下来每一行的最长的非递减的列的开头的 ...
- Android开发 旋转屏幕导致Activity重建解决方法(转)
文章来源:http://www.jb51.net/article/31833.htm Android开发文档上专门有一小节解释这个问题.简单来说,Activity是负责与用户交互的最主要机制,任何“ ...
- wampserver安装错误 应用程序无法正常启动0xc000007b解决方法
在重装系统之后发现以前安装的wampserver启动会出现错误提示"应用程序无法正常启动0xc000007b解决方法",重新安装也是一样的错误.上网找了相关信息后发现,并不是只有本 ...
- ASP.NET自定义模块
要创建自定义模块,类需要实现IHttpModule接口.这个接口定义了Init和Dispose方法. Init方法在启动Web应用程序时调用,其参数的类型是HttpContext,可以添加应用程序处理 ...
- Linux下修改环境终端提示符
Linux修改环境变量PS1(命令行提示符),可以使用vi编辑/etc/bashrc或/etc/profile文件,在最后加上: export PS1='[\u@\h \W]\$ ' 即可,其中\u显 ...
- js倒计时,秒倒计时,天倒计时
按天倒计时 HTML代码1: <Script Language="JavaScript"> <!-- Begin var timedate= new Date(& ...
- Centos 7 安装mysql后出现 ERROR 2002 (HY000)解决方案
Centos 7 安装mysql后出现 ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib ...