本文介绍了React中的路由概念，从传统的多页面应用到单页面应用（SPA）的转变，阐述了前端路由的基本原理。重点讲解了React Router库的安装和使用，包括HashRouter和BrowserRouter的区别，以及Route组件、Link组件的使用方法。在实践中遇到的路由匹配问题，通过exact属性实现了精确匹配，避免了多个路由同时显示的情况。还提到了如何通过render属性和NavLink组件实现组件间参数传递和激活状态的管理。
1、路由
当应用变得复杂的时候，就需要分块的进行处理和展示。
传统方式的处理: 把整个应用分成了多个页面，然后通过 URL 进行连接。
传统方式的弊端:
- 每次切换页面都需要重新发送所有请求和渲染整个页面，性能上会有影响；
- 会导致整个 JavaScript 重新执行，丢失状态。
2、单页面应用
单页面应用SPA(Single Page Application): 整个应用只加载一个页面（入口页面），
后续在与用户的交互过程中，通过 DOM 操作在这个单页上动态生成结构和内容。
**单页面应用优缺点**如下：
| 优点 | 缺点 |
|---|---|
| 有更好的用户体验（减少请求、渲染以及页面跳转等待），页面切换快 | 首次进入页面处理比较慢(请求减少，在同一页面内容就增多了，加载时间随之增加) |
| 数据和页面内容由异步请求（AJAX）+ DOM 操作来完成，前端处理更多的业务逻辑 | 不利于搜索引擎优化(SEO) |
3、SPA 的页面切换机制
虽然 SPA 的内容都是在一个页面通过 JavaScript 动态处理的，但是还是需要根据需求在不同的情况下分内容展示，如果仅仅只是依靠 JavaScript 内部机制去判断，逻辑会变得过于复杂，通过把 JavaScript 与 URL 进行结合的方式：JavaScript 根据 URL 的变化，来处理不同的逻辑，交互过程中只需要改变 URL 即可。这样把不同 URL 与 JavaScript 对应的逻辑进行关联的方式就是路由，其本质上与后端路由的思想是一样的。
4、前端路由
前端路由只是改变了 URL 或 URL 中的某一部分，但一定不会直接发送请求，可以认为仅仅只是改变了浏览器地址栏上的 URL 而已，JavaScript 通过各种手段处理这种 URL 的变化，然后通过 DOM 操作动态的改变当前页面的结构
前端路由特点：
- URL 的变化不会直接发送 HTTP 请求
- 业务逻辑由前端 JavaScript 来完成
目前前端路由主要的模式：
- 基于 URL Hash 的路由
- 基于 HTML5 History API 的路由
开发环境下(上线前)，在地址栏url中后者比前者多了一个#，其他没有什么差别；
参考https://www.cnblogs.com/GGbondLearn/p/12239651.html
React Router
基于 web 的 React Router 为：react-router-dom
安装
npm i -S react-router-dom
BrowserRouter 组件
基于 HTML5 History API 的路由组件
HashRouter 组件
基于 URL Hash 的路由组件
示例：简单的tab选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hash值的使用-简单tab选项卡</title>
</head>
<body>
<a href="#first">one</a>
<a href="#second">two</a>
<a href="#third">three</a>
<div id="box"></div>
<script>
function getHash(params) {
console.log(window.location.hash);
box.innerHTML = window.location.hash;
}
// 监听hashchange事件，当hash值发生改变时，调用getHash方法
window.addEventListener("hashchange",getHash);
</script>
</body>
</html>
Route 组件
通过该组件来设置应用单个路由信息，Route 组件所在的区域就是就是当 URL 与当前 Route 设置的 path 属性匹配的时候，后面 component 将要显示的区域
示例：
src/view/index.js
src/view/about.js
src/App.js
import React from 'react';
//index.js
export default function Index(){
return (<h1>首页</h1>);
}
import React from 'react';
//about.js
export default
最低0.47元/天 解锁文章
扫一扫
3504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
