react路由之旅第一讲

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

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

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

组件是具体的：按照一些小功能的通用性和可复用性来抽象组件

组件化更多的关注UI部分，比如用户看到的弹出框，页脚，确认按钮等，这些组件可以组合成新的组件，又可以和其他组件组合组合成新的组件

模块是抽象的：按照项目业务划分的大模块

模块化侧重于数据的封装，一组相关的组件定义成一个模块，一个json对象可以是一个模块。

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

import {

HashRouter as Router, //哈西路由有#号as是定 义一个新名

BrowserRouter, //浏览器路由

Link, //普通跳转

NavLink, //跳转，可以添加跳转之后的样式

Route, //路由

Switch, //开关，匹配唯一跳转

Redirect, //重定向

exact, //完全匹配路由

} from “react-router-dom”;

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

两个子文件的代码是：

（5）父组件引入抛出的son1和son2

App.js

import React from “react”;

import “./App.css”;

import {

HashRouter as Router, //哈西路由有#号as是定 义一个新名

BrowserRouter, //浏览器路由

Link, //普通跳转

NavLink, //跳转，可以添加跳转之后的样式

Route, //路由

Switch, //开关，匹配唯一跳转

Redirect, //重定向

exact, //完全匹配路由

} from “react-router-dom”;

import Son1 from “./oneDome/son1”;

import Son2 from “./oneDome/son2”;

function App() {

return (

我是个React

);

}

export default App;

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

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

（6）上面的操作只是证明引入没问题，然后引入路由

还是在App.js

/* 省略的代码 */

function App() {

return (

我是个React

);

}

export default App;

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

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

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

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

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

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

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

BrowserRouter： http://localhost:8080/abc/def

HashRouter： http://localhost:8080/#/abc/def

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

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

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

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

（8）现在呢，我就把BrowserRouter删掉了，Link换成NavLink

说一说Link和NavLink的区别：

是的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数，组件的属性有

。activeClassName(string)：设置选中样式，默认值为active

。activeStyle(object)：当元素被选中时，为此元素添加样式

。exact(bool)：为true时，只有当导致和完全匹配class和style才会应用

。strict(bool)：为true时，在确定为位置是否与当前URL匹配时，将考虑位置pathname后的斜线

。isActive(func)判断链接是否激活的额外逻辑的功能

修改App.js

import React from “react”;

import “./App.css”;

import {

HashRouter as Router, //哈西路由有#号as是定 义一个新名

BrowserRouter, //浏览器路由

Link, //普通跳转

NavLink, //跳转，可以添加跳转之后的样式

Route, //路由

Switch, //开关，匹配唯一跳转

Redirect, //重定向

exact, //完全匹配路由

} from “react-router-dom”;

import Son1 from “./oneDome/son1”;

import Son2 from “./oneDome/son2”;

function App() {

return (

我是个React

<NavLink

to=“/son1”

activeClassName=“select”

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

[外链图片转存中…(img-SJW0EqZd-1715587529223)]

[外链图片转存中…(img-pv3Maqs1-1715587529223)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！