React-Router常见API
React-Router是React项目中处理路由的库。
1. HashRouter
通过hashchange监听路由的变化,通过window.location.hash赋值触发监听的变化。
本质是一个react中的context对象,向下传参,传递参数有三种:
1. location
有四个属性:state, pathname, search, hash
state: 可以用来在路由中传递参数
pathname: 指定路由
2. history
主要有两个方法:
push: 可以实现跳转路由
// 传递对象
this.props.history.push({pathname: url, state: xxx})
// 传递路由
this.props.history.push(url)
3.match
通过该字段可以知道当前组件的路由是否和地址栏中路由相同。
应用:
import React, { Component } from 'react'
import { Route, Link } from '../react-router-dom'; export default function ({to, exact, ...rest}) {
// 实现单击后链接呈现选中状态
return (
<Route
path={to}
exact={exact}
children={(props) => {
return <Link to={to} className={props.match ? 'active' : ''}>{rest.children}</Link>
}}
/>
)
}
2.BrowserRouter
通过onpopstate事件监听通过点击前进后退/调用back()等方法的操作。通过改写pushState方法,监听页面中路由的变化。
其他和HashChange基本相同
3. Route
用于渲染指定路由的组件。children属性时,可以不指定路由。
用于匹配路由: path, exact
path: 指定路由
exact: 严格匹配
有三个属性用于渲染组件:
1. component
当path值匹配时,渲染component中的组件
2.render
当path匹配时,可以自定义渲染逻辑。相当于React中的render props复用组件功能。
如:受保护路由的实现。
import React from 'react';
import Route from '../react-router-dom/Route';
import { Redirect } from '../react-router-dom'; export default function({component:Component, ...rest}) {
return (
<Route {...rest}
render={(props) => localStorage.getItem('login') ?
<Component {...props} />
: <Redirect to={{pathname: '/login', state: {from: props.location.pathname}}} />}
/>
)
}
3.children
无论路由是否匹配,都会渲染。
如: 菜单的选中状态
import React, { Component } from 'react'
import { Route, Link } from '../react-router-dom'; export default function ({to, exact, ...rest}) {
// 实现单击后链接呈现选中状态
return (
<Route
path={to}
exact={exact}
children={(props) => {
return <Link to={to} className={props.match ? 'active' : ''}>{rest.children}</Link>
}}
/>
)
}
4. Link
to属性有两种参数形式
1. 对象类型
<Link to={{pathname: url, state: {xx:xx}}}/>
2. 字符串
<Link to="/user">
5. Switch/Redirect
Switch(只匹配一个路由)和Redirect(前面的都不匹配时走这个路由)配合使用。
重定向方式有两种:
1)组件重定向: <Redirect />
2)方法重定向 this.props.history.push()
6. withRouter
对于非Route加载的组件,想要使用从Route中传递的history,location,match属性,使用该方法。
其本质是个高阶组件。
import React from 'react';
import Route from './Route'; export default function(WrappedComponent) {
return (props) => <Route component={WrappedComponent} />
}
7. Prompt
1. 属性
1. when
根据该属性进行路由的拦截。当为true时,弹出一个下confirm框。
2.message
用于显示拦截的信息, 本质是个函数。
2. 原理
基于history.push()和history.block()方法。
React-Router常见API的更多相关文章
- React Router API文档
React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...
- React Router 4.x 开发,这些雷区我们都帮你踩过了
前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...
- [Web 前端] 你不知道的 React Router 4
cp from https://segmentfault.com/a/1190000010718620 几个月前,React Router 4 发布,我能清晰地感觉到来自 Twitter 大家对新版本 ...
- [转] React Router 使用教程
PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...
- React Router基础使用
React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...
- React Router 使用教程
一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...
- React router动态加载组件-适配器模式的应用
前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data ...
- React Router教程
React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-router-dom 应用于浏览 ...
- React Router 用法
React Router 用法 一.DEMO import React from "react"; import { HashRouter as Router, Route, Li ...
- react router @4 和 vue路由 详解(全)
react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...
随机推荐
- RabbitMq 概述
RabbitMQ是实现了高级消息队列协议(Advanced Message Queueing Protocol , AMQP)的开源消息代理软件(亦称面向消息的中间件). 1.AMQP协议 Rocke ...
- centos 6.5安装zabbix 4.4
一.安装环境 本环境,使用单机部署. 操作系统:centos 7.5 x64zabbix-server,Mysql,php,nginx都在同一台服务器.都是使用Yum安装的! 官方安装文档: http ...
- 多个数据源Mongo连接
MongoDB :https://my.oschina.net/u/3452433/blog/2999501多个数据源Mongo连接:https://juejin.im/post/5cf73090f2 ...
- Spring-Cloud之开篇
一.为什么会有spring-cloud.随着现代互联网的发展,以前很多传统的单体项目将不再满足于现在的互联网需求,而这个时候就诞生了另外一种说法,微服务.简单理解就是将软件应用程序独立部署的服务的一中 ...
- 2019 东方明珠java面试笔试题 (含面试题解析)
本人3年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.东方明珠等公司offer,岗位是Java后端开发,最终选择去了东方明珠. 面试了很多家公司,感觉大部分公司考察的点 ...
- windows开机自启动的django服务
做了一个django项目,想部署在win10的笔记本电脑上,可以开机后台自动启动.找了很多的方法.最后成功了. 参考了这个博主的内容. https://blog.csdn.net/qq_3595961 ...
- Git下载安装及设置详细教程
Git下载安装及设置详细教程 一.安装前准备 1. 廖雪峰老师Git教程 :推荐Git入门教程. 2. 按照自己的系统版本下载Git软件,我的操作系统:Windows7 64位,安装版本为Git ...
- GridPanel列头带有复选框的列
由于工作需要,封装了ExtJS4,GridPanel列头带有复选框的列, 代码如下: /** * 列头带有复选框的列 * */ Ext.define("org.pine.widget.Che ...
- MES选型很困惑?避开这三个禁忌!
MES系统的选型除了要充分剖析自己企业,掌握自己企业的需要.信息化的目标.自身的特点外,还要完全了解MES系统供应商,对其实力.软件性能.服务.用户.软件实施速度.价格进行了解与分析,这也是MES系统 ...
- robotframework的学习笔记(十八)——RequestsLibrary库的API介绍
requestsLibrary的关键字不多,常用的就几个. Create Session: 创建一个session,连接某个服务器.Create Ntlm Session: 也是创建一个session ...