react路由之旅第一讲

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”

activeStyle={{

fontWeight: “bold”,

color: “#fff”,

}}

exact

son1

     

<NavLink

to=“/son2”

activeStyle={{

fontWeight: “bold”,

color: “#fff”,

}}

activeClassName=“select”

son2

);

}

export default App;

修改以后最好重启一下服务，浏览器效果：

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

（10）重定向的使用Redirect

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

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

（10）Switch的使用

有 标签，则其中的在路径相同的情况下，只匹配第一个，这个可以避免重复匹配；

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

只出现了一个大儿子。

如果没有Switch呢？

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

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

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

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

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

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

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

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

[外链图片转存中…(img-m5jsKjGL-1713553810597)]

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

资料领取方式：戳这里前往免费领取