React的路由react-router

意思是:当你写一个web应用时候,应噶install的是react-router-dom,同样的,当你想写一个Native应用时候,需要install的是react-router-native,这两个都会下载react-router作为其依赖。
react-router 提供了router的核心api,Router,Route,Switch,但是没有提供dom操作进行跳转的api。
react-router-dom提供了BrowerRouter,Route,Link等api控制路由的跳转。
HashRouter和BrowserRouter:
react-router2、3或者vue-router,路由中包含#,就是HashRouter。
而react-router4不支持HashRouter,转而拥护BrowserRouter,原理是使用HTML5的history API(pushState,replaceState,popState)。
Route:
<Route exact path="/" component={OpenPacket}></Route>
经常使用的exact,path,component属性。exact控制匹配到路径/不会再继续向下匹配,path匹配路由,component表示路径对应显示的组件
Link和NavLink:
两者控制路由跳转,不同点是NavLink的api更多。
Switch:用来包裹Route,里面不能放其他元素。
【未完待续】
新年flag5——了解自己
React的路由react-router的更多相关文章
- react 创建项目 sass router redux
创建项目第一步 基本搭建 在创建之前,需要有一个git 仓库,我们要把项目搭建到git 中 目录介绍 cd 到某个盘 mkdir workspace 创建workspace文件夹 cd works ...
- 【react router路由】<Router> <Siwtch> <Route>标签
博客 https://www.jianshu.com/p/ed5e56994f13?from=timeline 文档 http://react-guide.github.io/react-router ...
- react动态路由以及获取动态路由
业务中会遇到点击列表跳转到详情页, 1.在index.js修改我们的跟组件 新建router2的文件 import React from 'react' import { HashRouter as ...
- React中路由的基本使用
现在我们来搞一搞React中的路由吧,别问我为什么这木喜欢用搞这个字,因为它比较深奥. 注意下面我们使用的是React-Router-DOM React中的路由基本使用还是满简单的,零碎的小东西有点多 ...
- react之路由
功能:让用户从一个视图(组件)导航到另一个视图(组件) 前端路由是一套映射规则,在React中,是URL路径与组件的对应关系 使用React路由简单来说,就是配置路径和组件 路由的使用 1.安装路由 ...
- 七天接手react项目 系列 —— react 路由
其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...
- react实战系列 —— React 中的表单和路由的原理
其他章节请看: react实战 系列 React 中的表单和路由的原理 React 中的表单是否简单好用,受控组件和非受控是指什么? React 中的路由原理是什么,如何更好的理解 React 应用的 ...
- react前置路由守卫
react中一切皆组件-- 目标:自定义user界面的前置路由守卫,当用户点击要进入user组件时,路由守卫发起判断,如果条件满足则进入,否则跳转至login组件. .入口文件index.js中代码如 ...
- react第十四单元(react路由-react路由的跳转以及路由信息)
第十四单元(react路由-react路由的跳转以及路由信息) #课程目标 理解前端单页面应用与多页面应用的优缺点 理解react路由是前端单页面应用的核心 会使用react路由配置前端单页面应用框架 ...
- react第十三单元(react路由-react路由的跳转以及路由信息) #课程目标
第十三单元(react路由-react路由的跳转以及路由信息) #课程目标 熟悉掌握路由的配置 熟悉掌握跳转路由的方式 熟悉掌握路由跳转传参的方式 可以根据对其的理解封装一个类似Vue的router- ...
随机推荐
- struts-dojo的使用
1.导入struts2-dojo-plugin-2.1.8.jar 2.在用使用dojo的页面引入 <span style="font-size:14px;">< ...
- 在mysql中生成数据库和数据表
#创建数据库CREATE DATABASE s4day65 DEFAULT CHARSET utf8; #班级表 CREATE TABLE class (id INT NOT NULL AUTO_IN ...
- 一次完整的HTTP请求响应过程(很详细)
一. HTTP请求和响应步骤 图片来自:理解Http请求与响应 以上完整表示了HTTP请求和响应的7个步骤,下面从TCP/IP协议模型的角度来理解HTTP请求和响应如何传递的. 二.TCP/IP协 ...
- Doc: NetBeans
NetBeans的最新版本已经更新为Apache NetBeans. 安装JDK 在Mac OS X下,有".dmg"的安装包,可以直接安装.只要JDK的版本大于1.8.0就可以安 ...
- E丢丢App重设计总结
E丢丢学习App是华夏大地教育可以有限公司旗下的一款产品,专为提升学历者打造,它整合了线上+跟踪的 (E平台)功能,方便工作人员随时随地管理账号.跟进学员:同时还可以随时了解教育行业的新闻资讯.一对一 ...
- 统计学方法(t-检验)
数据出来要做几件事:首先判断数据是否符合正态分布,如果符合的话,就要进行t-检验,那么进行t-检验的作用在哪呢? t-检验主要用于样本含量较小(例如n<30),总体标准差σ未知的正态分布 htt ...
- node-sass 安装失败的各种坑
开始的时候引入别人的一个项目 npm install npm run dev 启动项目 报错 > node build/dev-server.js Listening at http://loc ...
- linux下的时区修改
Centos 7时区问题: 通常使用tzselect命令选择时区,今天在修改centos7的时区的时候,修改完以后时区还是没有发生变化,重启也是没有用的:通过网络的帮助了解到,在Centos和ubun ...
- 为啥Waymo和Uber间的官司,这么难界定?
自动驾驶作为被众多巨头和创业者看好的技术及领域,已有众多企业涉足其中.在自动驾驶尚未完全落地.制定统一标准前,每家企业都在争分夺秒地进行研发,试图率先抢占自动驾驶的高地.毕竟一旦成功,就能够创造巨大的 ...
- Data Visualization and D3.js 笔记(1)
课程地址: https://classroom.udacity.com/courses/ud507 什么是数据可视化? 高效传达一个故事/概念,探索数据的pattern 通过颜色.尺寸.形式在视觉上表 ...