一文带你搞懂React路由（详解版）

今天来学习下新知识：React中最重要的一个知识点路由。 接下来看看吧✨

React 路由 🔻相关理解 ⛳SPA的理解

1️⃣ 单页Web应用（single page web application，SPA）。 2️⃣ 整个应用只有一个完整的页面（单页面，多组件）。 3️⃣ 点击页面中的链接不会刷新页面，只会做页面的局部更新。 4️⃣ 数据都需要通过 ajax 请求获取，并在前端异步展现。

⛳路由的理解

⭐什么是路由？

• 一个路由就是一个映射关系（key：value）
• key为路径，value可能是function或component

⭐路由分类：

1️⃣后端路由：

1. 理解： value是function, 用来处理客户端提交的请求。
2. 注册路由： router.get(path, function(req, res))
3. 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

2️⃣前端路由：

1. 理解： 浏览器端路由，value是component，用于展示页面内容。
2. 注册路由: < < > >
3. 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

⭐前端路由的原理

前端路由的实现是依靠 浏览器对象BOM里的历史记录——history。程序员不直接自己去操作BOM里的history，因为原生的API不好用，所以借助history.js库来操作。

引入history.js库：

创建history对象：

  let history = History.createHashHistory()

如何阻止a标签的跳转？点击a标签，调用push方法，得到的false返回值再返回给a标签

push test1


  let history = History.createHashHistory()
	function push (path) {
			history.push(path)
			return false
		}

⭕浏览器的历史纪录是一个栈的结构

每当执行push操作（追加历史记录）时，都是将path推入栈顶，浏览器也自动显示栈顶的内容，当点击浏览器的后退按钮时，就把栈顶的内容对应的路径出栈，也就是先进后出。

function push (path) {
  history.push(path)
  return false
}

每当执行replace操作（替换历史记录）时，是将目前栈顶的内容对应的路径替换，当点击后退按钮时，不会后退到刚刚被替换掉的内容（已经被替换掉了），而是回到被替换掉的内容的前一个历史记录。

function replace (path) {
  history.replace(path)
}

实现回退操作：(将栈顶内容出栈)

回退
function back() {
  history.goBack()
}

实现前进操作：(将栈外内容入栈)

前进
function forword() {
  history.goForward()
}

前端路由history有两种工作模式：history模式和hash模式

history模式是直接使用H5推出的history身上的API。

let history = History.createBrowserHistory()

hash模式是使用hash值（锚点跳转：不会引起页面刷新，会留下历史记录）（该模式路径中会多一个#号）

let history = History.createHashHistory()

⛳react-router-dom的理解

1. react的一个插件库。
2. 专门用来实现一个SPA应用。
3. 基于react的项目基本都会用到此库。

🔻react-router-dom相关API ⛳内置组件

1. < <
2. < <
3. < <
4. < <
5. < <
6. < <
7. < <

⛳其他

1. history对象
2. match对象
3. withRouter函数

🔻路由的基本使用

下载react-router-dom（5.3.3版本）：

npm i react-router-dom@5

⛳案例

需求：

左侧有一个导航，点击About/Home导航选项（路由链接）高亮，地址栏显示路由 /about或/home，右侧展示 About组件/Home组件 内容，整个页面不刷新。

简单来说：①点击导航链接，引起路径变化；②路径的变化被路由器监测到，进行匹配组件，展示对应的组件。

App.jsx

import React, { Component } from 'react';
import { Link, BrowserRouter } from 'react-router-dom'

export default class App extends Component {
  render() {
    return (
      
        
          
            
              React Router Demo
            
          
        
        
          
            
              {/* 原生html中，靠跳转到不同的页面 */}
              {/* About
              Home */}

              {/*编写路由链接---在react中靠 路由链接 实现切换组件 */}
              
                About
                Home
              
            
          
          
            
              
                ???
              
            
          
        
      
    );
  }
}

⭕注意点：

1. 路由链接是由react-router-dom库里的Link组件实现，写法类似a标签。

2. 路由链接必须写在路由器里，由路由器来管理，所以要在标签外侧包裹一个 < < > >。

3. 路由器分为两种：BrowserRouter和HashRouter。BrowserRouter的路由器地址栏中不带#号，HashRouter的路由器地址栏中带#号。

写到这里就已经实现了点击导航链接，引起路径变化的效果了。

App.jsx

import React, { Component } from 'react';
import { Link, Route } from 'react-router-dom'
import Home from './components/Home'
import About from './components/About';

export default class App extends Component {
  render() {
    return (
      
        
          
            
              React Router Demo
            
          
        
        
          
            
              {/* 原生html中，靠跳转到不同的页面 */}
              {/* About
              Home */}

              {/* 编写路由链接---在react中靠 路由链接 实现切换组件 */}
              About
              Home
            
          
          
            
              
                {/* 注册路由 */}
                
                
              
            
          
        
      
    );
  }
}

💥想要实现 路径的变化引起展示对应组件的变化，就要引入路由（Route），并且注册路由。

{/* 注册路由 */}

由于要在 < < 标签的外面用路由器 < < 包裹，但是刚刚编写路由链接已经包裹了一个路由器，就不能再写一个了。所以，可以将整个App.jsx用路由器包裹起来。

index.js

// 引入react核心库
import React from 'react'
// 引入ReactDOM
import ReactDOM from 'react-dom/client'
// 引入路由器
import { BrowserRouter } from 'react-router-dom';
// 引入App
import App from './App'

// 创建虚拟DOM
const root = ReactDOM.createRoot(document.getElementById('root'))
// 渲染虚拟DOM到页面
root.render(
  
    {/* 检查App组件以及子组件里的一些代码是否有不合理的地方 */}
    
      
    
  
)

整体效果：

❓如何实现点击某个路由链接标签时，产生高亮效果？

一般是在样式里边追加一个active，可以实现高亮。

About

但是如果追加了active，就不能用Link标签，要用Link的一个升级版——NavLink，就可以实现高亮了。

About
Home

NavLink标签里的可以传一个activeClassName属性，当你点击NavLink标签时，加哪个样式的类名。

index.html

  .demo {
    background-color: skyblue !important; //提高权重
    color: white;
  }

效果：

❓那么还有一个问题？

注册路由时，当有多个组件匹配相同的路径时，那么多个组件的内容都会展示在页面上。

  {/* 注册路由 */}
  
  
  

如何提高组件的匹配效率呢？需要引入Switch组件。

import { Route, Switch } from 'react-router-dom'

  {/* 注册路由 */}
  
  	
  	
    
  

注册路由时，在外面用Switch组件包裹起来，如果不包裹起来，当路径匹配上了组件之后，还会继续往下匹配，如果包裹了，就不会继续往下匹配了，提高组件匹配效率。

⛳总结

路由的基本使用

1️⃣明确好界面中的导航区、展示区

2️⃣导航区的a标签改为Link标签

Demo

3️⃣展示区写Route标签进行路径的匹配

4️⃣ < < > >的最外侧包裹了一个 < < > >或 < < > >

🔻路由组件与一般组件 ⛳区别

1️⃣写法不同：

一般组件： < < > >

路由组件： < < > >

2️⃣存放位置不同：

一般组件：components文件夹下

路由组件：pages文件夹下

3️⃣接收到的props不同

一般组件：写一般组件标签时传递了什么，就能收到什么，如果没传props，那么组件内的this.props为空。

路由组件：会收到路由器传递的三个props固定的属性。

今天的分享就到这里啦 ✨ 如果对你有帮助的话，还请👉🏻关注💖点赞🤞收藏⭐评论🔥哦 不定时回访哟🌹