react&vue路由使用总结

谁借莪１个温暖的怀抱￠ 2023-09-29 11:09 12阅读 0赞

**目录**

1.单页面（spa）应用的特点

2.react/vue路由核心原理

核心：监听hashChange事件

举例：

举例代码

3.React路由使用的基本

步骤

4.路由三大对象之-Router

目标

内容

举例：

5.路由三大对象之-Link

目标

Link

NavLink

测试代码

小结

6.路由三大对象之-Route

目标

route的作用和格式

匹配规则

示例

exact

小结

7.Switch与404

目标

问题

Switch

示例

8.处理404页

9.页面跳转 Redirect

格式

示例代码

10.编程式导航

目标

素材

11.编程式导航的格式

11.history.replace和push的区别

示例

12.动态路由与路由参数获取

目标

问题

动态路由

在组件中接收到路由的参数

13.嵌套路由的配置

业务举例：网易云嵌套路由

示例

核心代码

注意

14.路由小结

用到的组件：

执行过程

--------------------

### 1.单页面（spa）应用的特点 ###

--------------------

顾名思义，整个应用中只有一个页面，Vue和React都是典型的SPA。

**优点**：只有在第一次加载时会完整的加载整个页面（由此也就有了spa首次加载慢的性能问题），其他时候都是仅仅更新必要的数据。故用户体验更好，运行更流畅

**缺点**：不利于SEO优化，简单理解SEO优化:因为爬虫只爬取HTML页面中的文本内容，不会执行Js代码。对于这个问题我们的解决方式一般是：通过SSR(服务端渲染)，即先在服务端把内容渲染出来，然后返回给浏览器的就是纯HTML内容。

--------------------

### 2.react/vue路由核心原理 ###

前端路由是一套**映射规则**，是 *URL路径* 与 *组件* 的对应关系

使用 React 路由简单来说就是：配置路径和组件（配对）

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16][]

--------------------

#### 核心：监听hashChange事件 ####

**hash值： `localhost:3000/#/page1`**

\#之后的部分就是hash值，它有两个特点：

1.  hash值的变化(地址栏中改了hash值再回车)不会重新发请求。它不是请求路径的一部分。
2.  hash值的变化会触发hashChange事件。

#### 举例： ####

维护一个状态curHash。

1.  当hash变化(hashchange事件)时修改它；
2.  根据curHash的值来决定显示哪个组件

#### 举例代码 ####

目录结构

pages/Comment.jsx
    pages/Home.jsx
    pages/Search.jsx
    index.js

index.js

import React, { useEffect, useState } from 'react'
    import Home from './pages/Home.jsx'
    import Search from './pages/Search.jsx'
    import Comment from './pages/Comment.jsx'
    
    import ReactDom from 'react-dom'
    
    export default function App () {
      const [curHash, setCurHash] = useState('')
    
      useEffect(() => {
        const onChange = () => {
          // console.log(window.location.hash)
          setCurHash(window.location.hash.slice(1))
        }
        onChange()
        window.addEventListener('hashchange', onChange)
        return () => {
          window.removeEventListener('hashchange', onChange)
        }
      }, [])
      return (
        <div>
          <ul>
            <li>
              <a href="#/home">首页</a>
            </li>
            <li>
              <a href="#/comment">评论</a>
            </li>
            <li>
              <a href="#/search">搜索</a>
            </li>
          </ul>
          <hr />
          {curHash === '/home' && <Home />}
          {curHash === '/search' && <Search />}
          {curHash === '/comment' && <Comment />}
        </div>
      )
    }
    
    ReactDom.render(<App />, document.getElementById('root'))

--------------------

### 3.React路由使用的基本 ###

> #### 步骤 ####
> 
> 1.  **安装包。`npm i react-router-dom@5.3.0`**
>     
>     这个包提供了三个核心的组件:HashRouter, Route, Link
> 2.  **导入包，并使用。**`import { HashRouter, Route, Link } from 'react-router-dom'`
>     
>     1.  使用**HashRouter**包裹整个应用，一个项目中只会有一个Router
> 3.  **使用Link指定导航链接**
>     
>     1.  使用`Route`指定路由规则(哪个路径展示哪个组件)

--------------------

**代码举例：**

import React from 'react'
    import ReactDom from 'react-dom'
    import { HashRouter, Route, Link } from 'react-router-dom'
    import Search from './pages/Search.jsx'
    import Comment from './pages/Comment.jsx'
    export default function App () {
      return (
        <div>
          <h1>react路由基本使用</h1>
          <HashRouter>
            <Link to="/comment">评论</Link>
            <Link to="/search">搜索</Link>
    
            <Route path="/comment" component={Comment} />
            <Route path="/search" component={Search} />
          </HashRouter>
        </div>
      )
    }
    ReactDom.render(<App />, document.getElementById('root'))

--------------------

### 4.路由三大对象之-Router ###

#### 目标 ####

了解两种路由

HashRouter :hash模式

BrowserRouter: history模式

#### 内容 ####

Router 组件：包裹整个应用，一个 React 应用只需要使用一次

两种常用 Router：`HashRouter` 和 `BrowserRouter`

*  HashRouter：使用 URL 的哈希值实现（[http://localhost:3000/\#/first][http_localhost_3000_first]）
    
    原理：监听 window 的 `hashchange` 事件来实现的
 *  （推荐）BrowserRouter：使用 H5 的 history.pushState() API 实现（[http://localhost:3000/first][http_localhost_3000_first 1]）
    
    原理：监听 window 的 `popstate` 事件来实现的

#### 举例： ####

使用es6的导入重命名来统一名字： 无论导入的是哪个路由对象，都叫Router

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
    import { HashRouter as Router, Route, Link } from 'react-router-dom'
    <Router>

--------------------

### 5.路由三大对象之-Link ###

#### 目标 ####

掌握Link和NavLink的区别；

能使用NavLink设置高亮效果；

`import { Link, NavLink } from 'react-router-dom'`

#### Link ####

Link组件最终会渲染成a标签，用于指定路由导航

*  to属性，将来会渲染成a标签的href属性
 *  `Link`组件无法展示哪个link处于选中的效果

#### NavLink ####

`NavLink`组件，一个更特殊的`Link`组件，可以用用于指定当前导航高亮

格式：

说明：

*  to属性，用于指定地址，会渲染成a标签的href属性
 *  activeClassName: 用于指定高亮的类名，默认`active`。一般不去修改。
 *  exact: 精确匹配，表示必须地址栏和to的属性值 **精确匹配**类名才生效

#### 测试代码 ####

import React from 'react'
    import ReactDom from 'react-dom'
    import { BrowserRouter as Router, Route, Link, NavLink } from 'react-router-dom'
    import Search from './pages/Search.jsx'
    import Comment from './pages/Comment.jsx'
    export default function App () {
      return (
        <div>
          <h1>react路由基本使用-Link</h1>
          <Router>
            <div>
              Link:
              <Link to="/search">搜索</Link>
              <Link to="/comment">评论</Link>
            </div>
            <div>
              NavLink: 自带高亮类
              <NavLink to="/" exact>主页</NavLink>
              <NavLink to="/search">搜索</NavLink>
              <NavLink to="/comment">评论</NavLink>
            </div>
            <Route path="/comment" component={Comment} />
            <Route path="/search" component={Search} />
          </Router>
        </div>
      )
    }
    ReactDom.render(<App />, document.getElementById('root'))

#### **小结** ####

1.  **link和NavLink都用来做路由跳转。它们都用属性来指定跳转地址**
2.  **link和NavLink的区别是，NavLink指向的路径会自带一个名为\_\_\_\_的css类名**

--------------------

### 6.路由三大对象之-Route ###

#### 目标 ####

掌握配置路由规则

浏览器的路径和path的匹配成功，就会显示组件

--------------------

#### route的作用和格式 ####

1.  作用： 决定路由匹配规则
2.  格式：`<Route path="/xx/xx" component={组件}></Route>`

--------------------

#### 匹配规则 ####

名词约定：

1.  path： Route组件中path属性的值
2.  pathname: 指的如下格式
    
    1.  link组件中to的属性值
    2.  地址栏中的地址

模糊匹配规则

1.  只要pathname以path开头就算匹配成功
2.  匹配成功就加载对应组件；
3.  整个匹配过程是逐一匹配，一个匹配成功了，并**不会停止匹配**。

模糊匹配和精确匹配

1.  默认是模糊匹配的
2.  补充**exact**可以设置成精确匹配

--------------------

#### 示例 ####

import React from 'react'
    import ReactDom from 'react-dom'
    import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'
    const Home = () => <div>主页</div>
    const Article = () => <div>文章列表页</div>
    const ArticleDetail = () => <div>文章详情页</div>
    export default function App () {
      return (
        <div>
          <h1>react路由基本使用</h1>
          <Router>
            <NavLink to="/">主页</NavLink> 
            <NavLink to="/article">文章列表页</NavLink> 
            <NavLink to="/article/123">文章详情页-123</NavLink> 
            <hr />
            <Route path="/" component={Home} />
            <Route path="/article" component={Article} />
            <Route path="/article/123" component={ArticleDetail} />
          </Router>
        </div>
      )
    }
    ReactDom.render(<App />, document.getElementById('root'))

--------------------

#### exact ####

--------------------

#### 小结 ####

*  path 的说明
    
     *  默认情况下，/能够匹配任意/开始的路径
     *  如果 path 的路径匹配上了，那么就可以对应的组件就会被 render
 *  exact ， exact 表示精确匹配某个路径
    
     *  一般来说，如果路径配置了 /， 都需要配置 exact 属性

--------------------

### 7.Switch与404 ###

#### 目标 ####

掌握Switch的用法

--------------------

#### 问题 ####

Route组件的匹配成功之后并不会停止，它可能会匹配多个组件。

--------------------

#### Switch ####

用Switch组件包裹多个`Route`组件。

在`Switch`组件下，不管有多少个Route的路由规则匹配成功，都只会渲染**第一个**匹配的组件

--------------------

#### 示例 ####

import React from 'react'
    import ReactDom from 'react-dom'
    import {
      BrowserRouter as Router,
      Route,
      NavLink,
      Switch
    } from 'react-router-dom'
    const Home = () => <div>主页</div>
    const Article = () => <div>文章列表页</div>
    const ArticleDetail = () => <div>文章详情页</div>
    export default function App () {
      return (
        <div>
          <h1>react路由基本使用</h1>
          <Router>
            <NavLink to="/">主页</NavLink> 
            <NavLink to="/article">文章列表页</NavLink> 
            <NavLink to="/article/123">文章详情页-123</NavLink> 
            <hr />
            <Switch>
              <Route path="/" exact component={Home} />
              <Route path="/article" component={Article} />
              <Route path="/article/123" component={ArticleDetail} />
            </Switch>
          </Router>
        </div>
      )
    }
    ReactDom.render(<App />, document.getElementById('root'))

--------------------

### 8.处理404页 ###

思路： 不设置path属性，将404页对应的路由放在switch内部的最后位置

import React from 'react'
    import ReactDom from 'react-dom'
    import {
      BrowserRouter as Router,
      Route,
      NavLink,
      Switch
    } from 'react-router-dom'
    const Home = () => <div>主页</div>
    const Article = () => <div>文章列表页</div>
    const ArticleDetail = () => <div>文章详情页</div>
    const Page404 = () => <div>Page404</div>
    export default function App () {
      return (
        <div>
          <h1>react路由基本使用</h1>
          <Router>
            <NavLink to="/">主页</NavLink> 
            <NavLink to="/article">文章列表页</NavLink> 
            <NavLink to="/article/123">文章详情页-123</NavLink> 
            <hr />
            <Switch>
              <Route path="/" exact component={Home} />
              <Route path="/article" component={Article} />
              <Route path="/article/123" component={ArticleDetail} />
              <Route component={Page404} />
            </Switch>
          </Router>
        </div>
      )
    }
    ReactDom.render(<App />, document.getElementById('root'))

通过`Switch`组件非常容易的就能实现404错误页面的提示

--------------------

### 9.页面跳转 Redirect ###

页面跳转

--------------------

#### 格式 ####

--------------------

#### 示例代码 ####

import React from 'react'
    import ReactDom from 'react-dom'
    import { HashRouter, Route, Link, Redirect } from 'react-router-dom'
    import Search from './pages/Search.jsx'
    import Comment from './pages/Comment.jsx'
    export default function App () {
      return (
        <div>
          <h1>react路由基本使用</h1>
          <HashRouter>
         		<Switch>
              <Link to="/comment">评论</Link>
              <Link to="/search">搜索</Link>
    
    
              <Route path="/comment" component={Comment} />
              <Route path="/search" component={Search} />
                 {/* <Route path="/" component={Comment} /> */}
              <Redirect from="/" to="/comment" />
            </Switch>
          </HashRouter>
        </div>
      )
    }
    ReactDom.render(<App />, document.getElementById('root'))

--------------------

### 10.编程式导航 ###

**场景：**

点击登录按钮，登录成功后，通过代码跳转到后台首页，如何实现？

--------------------

**页面跳转有两类方式：**

1.  用户点击链接跳转
2.  写代码跳转-**编程式导航**

--------------------

#### 目标 ####

掌握history对象的使用，会用它来跳转页面。

--------------------

#### 素材 ####

index.jsx

import React from 'react'
    import ReactDom from 'react-dom'
    import { useHistory } from 'react-router'
    import './04.css'
    import {
      BrowserRouter as Router,
      Route,
      NavLink,
      Switch
    } from 'react-router-dom'
    import Login from './pages/Login'
    import Comment from './pages/Comment'
    import Search from './pages/Search'
    export default function App () {
      const history = useHistory()
      console.log(history)
      return (
        <div>
          <h1>react编程式导航</h1>
          <Router>
            <NavLink to="/login">登录</NavLink>
            <NavLink to="/comment">评论</NavLink>
            <NavLink to="/search">搜索</NavLink>
            <hr />
            <Switch>
              <Route path="/login" component={Login} />
              <Route path="/comment" component={Comment} />
              <Route path="/search" component={Search} />
            </Switch>
          </Router>
        </div>
      )
    }
    ReactDom.render(<App />, document.getElementById('root'))

--------------------

### 11.编程式导航的格式 ###

import {useHistory} from 'react-router'
    
    export default function App() {
      const history = useHistory()
      
      history.push('/find')
      // 前进或后退到某个页面，参数 n 表示前进或后退页面数量（比如：-1 表示后退到上一页）
      history.go(-1) 
      
      // 进入/frend，并替换记录
      history.replace('/frend') 
      
    }

--------------------

### 11.history.replace和push的区别 ###

push：向历史记录中添加一条

replace：在历史记录中用目标记录来替换当前记录

--------------------

#### 示例 ####

push

详情页  --> login页(push)  ----> 主页

此时，从主页后退，会回到login页。

replace

详情页  --> login页(replace)  ----> 主页

此时，从主页后退，会回到详情页。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

--------------------

### 12.动态路由与路由参数获取 ###

#### 目标 ####

掌握动态路由及参数获取的用法

--------------------

#### 问题 ####

如何设置如下路由匹配规则，以显示文章详情

--------------------

#### 动态路由 ####

// 可以匹配 /article/1  /article/2  /article/xxx
    <Route path="/article/:id" component={Article} />

--------------------

**说明：**

1.  上面的/:id 称为占位符。id可以改成其他的变量名。
2.  占位符可以有多个。例如： `/article/:形参1/:形参2`

--------------------

#### 在组件中接收到路由的参数 ####

有两个方式：

1.  通过`props`可以
    
        function Article(props){
            console.log(props.match.params.id)
        }
2.  通过`hooks`可以
    
        impoirt { useParams } from 'react-router'
        const params = useParams()
        console.log(params) // 这里有数据

--------------------

### 13.嵌套路由的配置 ###

--------------------

#### 业务举例：网易云嵌套路由 ####

掌握嵌套路由的使用。

不需要学习任何新内容

--------------------

#### 示例 ####

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

--------------------

#### 核心代码 ####

App () {
      return 
        <Router>
          <ul>
            <li><NavLink to="/find">发现</NavLink></li>
            <li><NavLink to="/my">我的音乐</NavLink></li>
              <li><NavLink to="/frend">朋友</NavLink></li>
          </ul>
    
          <Switch>
               <Route path="/find" component={Find}></Route>
              <Route path="/my" component={My}></Route>
              <Route path="/frend" component={Frend}></Route>
          </Switch>
        </Router>
    }

Find.js

Find(){
      return <Router>
        <ul>
        	<li><NavLink to="/find/recommand">推荐</NavLink></li>
          <li><NavLink to="/find/top">排行榜</NavLink></li>
           <li><NavLink to="/find/list">歌单</NavLink></li>
        </ul>
      
        <Switch>
             <Route path="/find/recommand" component={Com1}></Route>
      			<Route path="/my/top" component={Com2}></Route>
      			<Route path="/frend/list" component={Com3}></Route>
        </Switch>
        </Router>
    }

--------------------

#### 注意 ####

配置嵌套路由的时候，需要对路径进行处理，必须要先匹配到父级路由，才能匹配到子路由

--------------------

### 14.路由小结 ###

#### 用到的组件： ####

**HashRouter, BrowserRouter, Link, NavLink, Route, Redirect, Switch**

--------------------

#### 执行过程 ####

> 1.  点击 Link 组件（a标签），修改了浏览器地址栏中的 url
> 2.  React 路由监听到地址栏 url 的变化 hashChange popState
> 3.  React 路由内部遍历所有 Route 组件，使用路由规则（path）与 pathname（hash）进行匹配
> 4.  当路由规则（path）能够匹配地址栏中的 pathname（hash） 时，就展示该 Route 组件的内容

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c1d58ee288f143fab8ba4e88445a31ff.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_20,color_FFFFFF,t_70,g_se,x_16
[http_localhost_3000_first]: http://localhost:3000/#/first
[http_localhost_3000_first 1]: http://localhost:3000/first
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/9f1f9a19900e4cb28ab53617cd4f55b3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/7aa0cfcc81a04278a6602216102b0b2f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_20,color_FFFFFF,t_70,g_se,x_16