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

文章目录

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

React 路由

🔻相关理解

⛳SPA的理解

1️⃣ 单页Web应用（single page web application，SPA）。
2️⃣ 整个应用只有

一个完整的页面

（单页面，多组件）。
3️⃣ 点击页面中的链接

不会刷新

页面，只会做页面的

局部更新

。
4️⃣ 数据都需要通过 ajax 请求获取，并在前端异步展现。

⛳路由的理解

⭐什么是路由？

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

⭐路由分类：

1️⃣后端路由：

理解： value是function, 用来处理客户端提交的请求。

注册路由： router.get(path, function(req, res))

工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

2️⃣前端路由：

理解：浏览器端路由，value是component，用于展示页面内容。

注册路由: ** < < <Route path=“/test” component={Test} > > >**

工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

⭐前端路由的原理

前端路由的实现是依靠

浏览器对象BOM里的历史记录——history

。程序员不直接自己去操作BOM里的history，因为原生的API不好用，所以借助

history.js库

来操作。

引入history.js库：

<script type="text/javascript" src="https://cdn.bootcss.com/history/4.7.2/history.js"></script>

创建history对象：

<script type="text/javascript">let history = History.createHashHistory()</script>

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

<a href="http://www.atguigu.com" onclick="return push('/test1') ">push test1</a><script type="text/javascript" src="https://cdn.bootcss.com/history/4.7.2/history.js"></script><script type="text/javascript">let history = History.createHashHistory()functionpush(path){
            history.push(path)returnfalse}</script>

⭕

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

每当执行

push操作

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

先进后出

。

functionpush(path){
  history.push(path)returnfalse}

每当执行

replace操作

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

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

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

<button onClick="back()">回退</button>functionback(){
  history.goBack()}

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

<button onClick="forword()">前进</button>functionforword(){
  history.goForward()}

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

history模式

和

hash模式

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

let history = History.createBrowserHistory()

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

let history = History.createHashHistory()

⛳react-router-dom的理解

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

🔻react-router-dom相关API

⛳内置组件

                               <                              <                  <BrowserRouter>

                               <                              <                  <HashRouter>

                               <                              <                  <Route>

                               <                              <                  <Redirect>

                               <                              <                  <Link>

                               <                              <                  <NavLink>

                               <                              <                  <Switch>

⛳其他

history对象
match对象
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'exportdefaultclassAppextendsComponent{render(){return(<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group">{/* 原生html中，靠<a>跳转到不同的页面 */}{/* <a className="list-group-item" href="./about.html">About</a>
              <a className="list-group-item active" href="./home.html">Home</a> */}{/*编写路由链接---在react中靠 路由链接 实现切换组件 */}<BrowserRouter><Link className="list-group-item" to="/about">About</Link><Link className="list-group-item" to="/home">Home</Link></BrowserRouter></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body">???</div></div></div></div></div>);}}

⭕注意点：

路由链接是由react-router-dom库里的Link组件实现，写法类似a标签。
路由链接必须写在路由器里，由路由器来管理，所以要在标签外侧包裹一个 < < <Router > > >。
路由器分为两种：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';exportdefaultclassAppextendsComponent{render(){return(<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group">{/* 原生html中，靠<a>跳转到不同的页面 */}{/* <a className="list-group-item" href="./about.html">About</a>
              <a className="list-group-item active" href="./home.html">Home</a> */}{/* 编写路由链接---在react中靠 路由链接 实现切换组件 */}<Link className="list-group-item" to="/about">About</Link><Link className="list-group-item" to="/home">Home</Link></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body">{/* 注册路由 */}<Route path="/about" component={About}/><Route path="/home" component={Home}/></div></div></div></div></div>);}}

💥想要实现 路径的变化引起展示对应组件的变化，就要

引入路由（Route）

，并且

注册路由

。

{/* 注册路由 */}<Route path="/about" component={About}/><Route path="/home" component={Home}/>

由于要在

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

index.js

// 引入react核心库import React from'react'// 引入ReactDOMimport ReactDOM from'react-dom/client'// 引入路由器import{ BrowserRouter }from'react-router-dom';// 引入Appimport App from'./App'// 创建虚拟DOMconst root = ReactDOM.createRoot(document.getElementById('root'))// 渲染虚拟DOM到页面
root.render(<React.StrictMode>{/* 检查App组件以及子组件里的一些代码是否有不合理的地方 */}<BrowserRouter><App /></BrowserRouter></React.StrictMode>)

整体效果：

在这里插入图片描述

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

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

<Link className="list-group-item active" to="/about">About</Link>

但是如果追加了active，就不能用Link标签，要用Link的一个升级版——

NavLink

，就可以实现高亮了。

<NavLink activeClassName='demo' className="list-group-item" to="/about">About</NavLink><NavLink activeClassName='demo' className="list-group-item" to="/home">Home</NavLink>

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

index.html

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

效果：

在这里插入图片描述
❓那么还有一个问题？

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

<div className="panel-body">{/* 注册路由 */}<Route path="/about" component={About}/><Route path="/home" component={Home}/><Route path='/home' component={Demo}/></div>

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

Switch组件

。

import{ Route, Switch }from'react-router-dom'<div className="panel-body">{/* 注册路由 */}<Switch><Route path="/about" component={About}/><Route path="/home" component={Home}/><Route path="/home" component={Demo}/></Switch></div>

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

⛳总结

路由的基本使用

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

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

<Link to ="/xxxxx">Demo</Link>

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

<Route path="'/xxxx" component={Demo}/>

4️⃣

    <
   
  
  
   <
  
 
<App

 
  
   
    >
   
  
  
   >
  
 
>的最外侧包裹了一个

 
  
   
    <
   
  
  
   <
  
 
<BrowserRouter

 
  
   
    >
   
  
  
   >
  
 
>或

 
  
   
    <
   
  
  
   <
  
 
<HashRouter

 
  
   
    >
   
  
  
   >
  
 
>

🔻路由组件与一般组件

⛳区别

1️⃣写法不同：

一般组件：

路由组件：

     <
    
   
   
    <
   
  
 <Route path=“/demo” component={Demo}/
 
  
   
    
     >
    
   
   
    >
   
  
 >

2️⃣存放位置不同：

一般组件：
components文件夹
下

路由组件：
pages文件夹
下

3️⃣接收到的props不同

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

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

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

标签： javascript 前端 react.js

本文转载自: https://blog.csdn.net/xuxuii/article/details/125691593
版权归原作者 努力成为一名合格的程序员 所有，如有侵权，请联系我们删除。

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

文章目录

React 路由

🔻相关理解

⛳SPA的理解

⛳路由的理解

⛳react-router-dom的理解

🔻react-router-dom相关API

⛳内置组件

⛳其他

🔻路由的基本使用

⛳案例

⛳总结

🔻路由组件与一般组件

⛳区别

发表评论

“一文带你搞懂React路由（详解版）”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航