今天开始react一个重要部分的xiao~习,路由~(过程截图,最后附代码)

以下代码只能骗糊涂蛋子,没错,就是我自己,不要打算让我敲出多高级的东西~

理论性知识几乎没有,请不要打算让我给你说原理啥的,原理性的东西,网上很多,我现在搬砖学习很开心,勿忘初心~

(1)首先,你确定你安装了react环境,这第一步难度系数1,菜鸟级别的不演示了

(2)接下来,你要是用react路由,需要安装路由插件

  1. npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令

这一步安装,你的选择很多,我是用的 vs code的终端安装的,因为不想开小窗口,嫌烦

安装成功。

(3)因为不知道我们要用到些什么,于是我就引入了很多组件。

这里我去搜索了一下模块和组件的区别,为什么叫引入组件而不是模块

  1. 组件是具体的:按照一些小功能的通用性和可复用性来抽象组件
  2. 组件化更多的关注UI部分,比如用户看到的弹出框,页脚,确认按钮等,这些组件可以组合成新的组件,又可以和其他组件组合组合成新的组件
  3.  
  4. 模块是抽象的:按照项目业务划分的大模块
  5. 模块化侧重于数据的封装,一组相关的组件定义成一个模块,一个json对象可以是一个模块。

这里只谈区别,因为用词的精确性问题,程序员应该有一种对逻辑和正确性 ‘咬文嚼字’ 的态度。

引入了不少的东西。。。我后面会给你解释每一个的,你先引进去。

(4)我新建了两个儿子(子文件son1和son2)在newDemo文件夹中。

我区分了他们呢,并把他们抛出。

(5)父组件引入抛出的son1和son2

运行环境,浏览器中打开显示是这样的:

图中显示了父组件的"我是个React"和引入的两个子组件的“大儿子“和”二儿子”。

黄色部分的警告:不影响砸门使用,提醒砸门引入了但是没有用的组件和模块。

(6)上面的操作只是证明引入没问题。。。哈哈哈嗝~

这是一个规规矩矩的局部路由,(友情踩坑提示,link标签的首字母记得大写)

Router大标签,套住Link和Route,注释呢,已经在图片上给你写出来了,在网页上,他是这个样子的:

右边的警告是不是少了?额,不喜欢就注释了嘛先。而你点击跳转是这样的:

(7)现在呢我们,说一下我们为什么用哈西路由(HasRouter)而不是浏览器路由(BrowserRouter)。

(Router是我们起的别名 as 的作用就是这个啦。)

首先说一下哈西路由(HashRouter)和浏览器路由(BrowserRouter):

以下解释的前提是你要懂什么叫 hash 地址,hash 地址就是指 # 号后面的 url。

假如有一个 Link 标签,点击后跳转到 /abc/def。

  1. BrowserRouter http://localhost:8080/abc/def
  2. HashRouter http://localhost:8080/#/abc/def

如果有服务器端的动态支持,建议使用 BrowserRouter,否则建议使用 HashRouter。

原因在于,如果是单纯的静态文件,假如路径从 / 切换到 /a 后,此时刷新页面,页面将无法正常访问。

因为写服务器文件还比较麻烦,因此在之后的 DEMO 中,我们将主要使用 HashRouter 而不是 BrowserRouter。

线上项目和实际网站是不会出现#的,所以用的是 BrowserRouter。

(8)现在呢,我就把BrowserRouter删掉了,Link换成NavLink

说一说Link和NavLink的区别:

  1. <NavLink><Link>的一个特定版本,会在匹配上当前的url的时候给已经渲染的元素添加参数,组件的属性有
  2.  
  3. 。activeClassName(string):设置选中样式,默认值为active
  4. 。activeStyle(object):当元素被选中时,为此元素添加样式
  5. 。exact(bool):为true时,只有当导致和完全匹配class和style才会应用
  6. 。strict(bool):为true时,在确定为位置是否与当前URL匹配时,将考虑位置pathname后的斜线
  7. 。isActive(func)判断链接是否激活的额外逻辑的功能

好吧,我摊牌了https://blog.csdn.net/lhjuejiang/article/details/80366839 链接给你!

看这里,我把to后面直接跟了一个路径,也是没问题的。

 (9)把son2也引进去,

现在我要试一试NavLink的选中样式了

虽然只是一个简单的样式的使用,可见其优化后用起来还是很不错的。

(10)重定向的使用Redirect

重定向,我觉得吧,分两种常用的情况。

1》进入界面你需要默认一个网址,或者默认一个局部,就是我现在的情况,直接定义到son3,但是没有son3这个模块,所以啥也不显示,但是你可以定义到其它界面

2》匹配没有那个界面的时候,转到一个404界面或者其它界面,这个比较常见,符合实际产品的开发。

(11)Switch的使用

有<Switch>标签,则其中的<Route>在路径相同的情况下,只匹配第一个,这个可以避免重复匹配;

我其他地方没有动,只改了路径,我们看效果。

只出现了一个大儿子。

如果没有Switch呢?

大儿子二儿子都蹦跶出来了。。。

(12)exact的用处,严格匹配!

看标红线的地方,然后看界面显示,这个时候没有用exact,我们进入   '/son1/son2' 时,两个组件都会加载出来。

现在我们给第一个son1加上exact!

看界面!

只加载了一个二儿子!

(13)新人的总结感言。

东西不算多,但是一个一个截图查资料,真的受益无穷,会和熟悉,对于新开发一个功能,可能区别不大,因为我们都会在网上查大量的资料,去完善,去对比,但是对于搬砖期间,熟悉可以更有效地搬砖,节约时间,从而提高效率,抽出时间去学习!

我的一个react路由之旅(步骤及详图)的更多相关文章

  1. 我的一个React路由嵌套(多级路由),路由传参之旅

    在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的rea ...

  2. React路由-基础篇

    React-Router-DOM ReactRouter网址, 安装 -npmjs找到react-router-dom -yarn add react-router-dom 基本使用方法 1.创建一个 ...

  3. 部署React+webpack工程的步骤

    # 部署React+webpack工程的步骤ps:以Mac os系统做开发环境.因为npm现在使用灰常的慢,所以我使用淘宝境像cnpm. 1,准备工作: 先确保存已经安装了node.js: 2,文件部 ...

  4. 【React 8/100】 React路由

    React路由 React路由介绍 现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序.因为它的用户体验更好.对服务器压力更小,所以更受欢迎.为了有效的使用单个页面来管 ...

  5. 简单的说一下react路由(逆战班)

    现代前端大多数都是SPA(单页面程序),也就是只有一个HTML页面的应用程序,因为它的用户体验更好,对服务器压力更小,所以更受欢迎,为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生. 前 ...

  6. 从零构建一个react+webpack+typescript的应用

    今天要完成在windows下从零开始构建一个react应用的任务 首先,新建一个文件夹,然后在该文件夹下使用命令npm init 初始化一个node项目. 然后安装所需依赖, npm i react ...

  7. (24/24) webpack小案例--自己动手用webpack构建一个React的开发环境

    通过前面的学习,对webpack有了更深的认识,故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境,就算是一个小案例吧. 注:此处使用的开发工具是Webstorm. 1. ...

  8. react路由的安装及格式和使用方法

    react路由的安装: 在要创建项目的目录命令窗里输入: cnpm install -g create-react-app create-react-app  项目名 在创建好的项目目录命令窗里输入: ...

  9. react router @4 和 vue路由 详解(七)react路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...

随机推荐

  1. python之子类继承父类时进行初始化的一些问题

    直接看代码: class Person: def __init__(self): self.name = "jack" class Student(Person): def __i ...

  2. HDU2089 不要62 题解 数位DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2089 题目大意:求区间 \([l,r]\) 范围内不包含数字"4"且不包含连续的数 ...

  3. docker-none

    禁用容器的网络连接 如果要完全禁用容器上的网络堆栈,可以--network none在启动容器时使用该标志.在容器内,仅创建环回设备.以下示例说明了这一点. 创建容器. $ docker run -- ...

  4. CentOS7.2 部署Ceph分布式存储

    1.1 环境准备 主机名 IP地址 ceph-admin 192.168.16.220 ceph-node1,ceph-mon 192.168.16.221 ceph-node2,ceph-mon 1 ...

  5. Cassandra数据建模中最重要的事情:主键

    Cassandra数据建模中要了解的最重要的事情:主键 使用关系数据建模,您可以从主键开始,但是RDBMS中的有效数据模型更多地是关于表之间的外键关系和关系约束.由于Cassandra无法使用JOIN ...

  6. Hyperledger Fabric1.4 安装

    Hyperledger Fabric 依赖的软件版本查看官方 github 地址 https://github.com/hyperledger/fabric 下文件 /docs/source/prer ...

  7. 揭发233的docker/machine

    继手动滑稽之golang-vmware-driver广告篇,今天把vmware-driver完成 然而我却要发一篇牢骚,这是对docker公信力的挑战!!! 本来很简单的升级到vmware 15.x的 ...

  8. 在A卡下的 Matlab 运行C/C++混编的GPU程序

    首先将你的.MEX文件和matlab脚本放在一个文件夹下开始运行 如果出错查看是那个.MEX文件出错 用depends这个软件查看他的依赖dll文件下载对应文件 放到当前文件夹下,运行成功.

  9. 一款精美的Toast第三方库的简单使用

    以前一直用的安卓原生Toast,个人感觉Toast这东西,没必要花功夫,知道看到了Toasty这东西,立刻被圈粉了,真的非常好看. 项目地址 我们都知道,安卓原生Toast的用法是 Toast.mak ...

  10. 使用rabbitmq手动确认消息的,定时获取队列消息实现

    描述问题 最近项目中因为有些数据,需要推送到第三方系统中,因为数据会一直增加,并且需要与第三方系统做相关交互. 相关业务 本着不影响线上运行效率的思想,我们将增加的消息放入rabbitmq,使用另一个 ...