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中,想 ...
随机推荐
- response.getWriter().write()与out.print()的区别(转)
1.首先介绍write()和print()方法的区别: (1).write():仅支持输出字符类型数据,字符.字符数组.字符串等 (2).print():可以将各种类型(包括Object)的数据通 ...
- Tcl与Design Compiler (十二)——综合后处理
本文如果有错,欢迎留言更正:此外,转载请标明出处 http://www.cnblogs.com/IClearner/ ,作者:IC_learner 概述 前面也讲了一些综合后的需要进行的一些工作,这 ...
- Linux简介与厂商版本下
2. Linux的厂商版本 在Linux内核基础上,我们还有许多厂商版本.即使有了内核和GNU软件,Linux的安装和编译并不是简单的工作,Linux厂商就是瞄准了这个市场.这些厂商会在Linux内核 ...
- mysql 分析3使用分析sql 性能 show profiles ;
show variables like '%profiling%'; 查看状态 查看时间去哪了``` set profiling=1;// 打开 show profiles; 查看执行过的 ...
- java 基础知识五 数组
java 基础知识五 数组 数组保存的是一组有顺序的.具有相同类型的数据. 同一个数组中所有数据元素的数据类型都是相同的. 可以通过数组下标来访问数组,数据元素根据下标的顺序,在内存中按顺序存放 ...
- 【转载】关于c++中的explicit
按照默认规定,只有一个参数的构造函数也定义了一个隐式转换,将该构造函数对应数据类型的数据转换为该类对象,如下面所示: class String { String ( const char* p ); ...
- Map和Set
JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构,即一组键值对. 但是JavaScript的对象有个小问题,就是键必须是字符串.但实际上Number ...
- 为已有表快速创建自动分区和Long类型like 的方法-Oracle 11G
对上一篇文章进行实际的运用.在工作中遇到有一张大表(五千万条数据),在开始的时候忘记了创建自动分区,导致现在使用非常不方便,查询的速度非常的满,所以就准备重新的分区表,最原始方法是先创建新的分区表,然 ...
- AOP中的ASPECTJ
一.准备 1.架包 2.配置文件 二.注解的形式 UserDao.java package cn.itcast.spring.aspectj.annocation; public class User ...
- IE和其他浏览器用JS新窗口打开的问题
Chrome中 window.open(pageURL,name,parameters) pageURL 为子窗口路径 name 为子窗口句柄 parameters 为窗口参数(各参数用逗号分隔) 例 ...