意思是:当你写一个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的更多相关文章

  1. react 创建项目 sass router redux

    ​ 创建项目第一步 基本搭建 在创建之前,需要有一个git 仓库,我们要把项目搭建到git 中 目录介绍 cd 到某个盘 mkdir workspace 创建workspace文件夹 cd works ...

  2. 【react router路由】<Router> <Siwtch> <Route>标签

    博客 https://www.jianshu.com/p/ed5e56994f13?from=timeline 文档 http://react-guide.github.io/react-router ...

  3. react动态路由以及获取动态路由

    业务中会遇到点击列表跳转到详情页, 1.在index.js修改我们的跟组件 新建router2的文件 import React from 'react' import { HashRouter as ...

  4. React中路由的基本使用

    现在我们来搞一搞React中的路由吧,别问我为什么这木喜欢用搞这个字,因为它比较深奥. 注意下面我们使用的是React-Router-DOM React中的路由基本使用还是满简单的,零碎的小东西有点多 ...

  5. react之路由

    功能:让用户从一个视图(组件)导航到另一个视图(组件) 前端路由是一套映射规则,在React中,是URL路径与组件的对应关系 使用React路由简单来说,就是配置路径和组件 路由的使用 1.安装路由 ...

  6. 七天接手react项目 系列 —— react 路由

    其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...

  7. react实战系列 —— React 中的表单和路由的原理

    其他章节请看: react实战 系列 React 中的表单和路由的原理 React 中的表单是否简单好用,受控组件和非受控是指什么? React 中的路由原理是什么,如何更好的理解 React 应用的 ...

  8. react前置路由守卫

    react中一切皆组件-- 目标:自定义user界面的前置路由守卫,当用户点击要进入user组件时,路由守卫发起判断,如果条件满足则进入,否则跳转至login组件. .入口文件index.js中代码如 ...

  9. react第十四单元(react路由-react路由的跳转以及路由信息)

    第十四单元(react路由-react路由的跳转以及路由信息) #课程目标 理解前端单页面应用与多页面应用的优缺点 理解react路由是前端单页面应用的核心 会使用react路由配置前端单页面应用框架 ...

  10. react第十三单元(react路由-react路由的跳转以及路由信息) #课程目标

    第十三单元(react路由-react路由的跳转以及路由信息) #课程目标 熟悉掌握路由的配置 熟悉掌握跳转路由的方式 熟悉掌握路由跳转传参的方式 可以根据对其的理解封装一个类似Vue的router- ...

随机推荐

  1. 创想变现:斯坦福设计创新课堂ME310分享(下篇)

    编者按:今年6月,微软亚洲研究院人机交互组研究员顾嘉唯,在美国斯坦福大学担任了D-School的ME310设计课程的项目评审.该课程是斯坦福大学的全球联合新产品设计创新课程,学习方式以小组为单位,每个 ...

  2. Linux SSH 使用密钥登陆

    Linux SSH 使用密钥登陆 通常我们登录 Linux 服务器,我们需要使用密码进行登录,但是密码存在被暴力破解的可能. 可以将默认服务端口 22 改成其他不常用的端口. 可以设置非常复杂的密码. ...

  3. scala语言yield配合for的用法实例

    yield配合for的用法 话不多说见实例 package com.donews.reynold /** * Created by reynold on 2017/3/23. */ object Sc ...

  4. postman接口测试使用

    在做测试之前,先要了解一下http相关的一些知识,这样做起来才会更加顺手. http的请求分为header 和 body,一般在header里面放一些其他的信息,比如cookie,浏览器信息 body ...

  5. 框架之MyBatis

    什么是框架,简单的来说框架就是一个程序的半成品,而我们就是的工作就是根据我们的工作需要将其完善.MyBatis框架的作用就是将我们使用JDBC操作数据库的过程移交给MyBatis,让它来帮我们完成这些 ...

  6. JVM常见问题分析

    JVM常见问题分析 启动,并且去查看日志 ./startup.sh && tail -f ../logs/catalina.out 常见有有以下几个问题: 1.java.lang.Ou ...

  7. 关于unicode汉字范围正则表达式的写法

    \u2E80-\u2EFF:CJK部首补充: \u2F00-\u2FDF:康熙部首: \u3000-\u303F:CJK标点符号: \u31C0-\u31EF:CJK笔划: \u3200-\u32FF ...

  8. Docker的网络类型

    四种网络类型: None:不为容器配置任何网络功能,--net=noneContainer:与另一个运行中的容器共享Network Namespace,--net=container:containe ...

  9. js寄生组合式继承

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. win10 安装VMware Workstation Pro提示无法在windows上运行

    win10 安装vm无法在windows上运行 之前还可以用 网上搜了一下  要安装最新15.5.0就不会报错了 没毛病!! 不想注册下载 百度网盘(2019年9月19日版本) https://pan ...