React -08 路由 + 知识点补充

前端路由

• 概念： url和组件之间的 映射关系
• 单页引用：（1）.优点. 无刷新跳转只有一个页面，服务器压力小 （2）. 缺点 .不利于 SEO. 要配合SSR
• 两种模式： （1） . Hash. - 兼容性好，#好后面的内容不会作为资源发送到服务器端（2）. History .- 低版本IE 兼容性不好. 需要服务端支持

react-router-dom

• 1 . yarn add react-router-dom@5.3
• 2 . import (HasRouter , Link , Route ) from 'react-router-dom'
• 3 . HashRouter 包裹整个应用
• 4 . 通过Link 组件配合 to 属性指定路由入口
• 5 . 通过Route 组件配合 path 属性指定路由出口，通过 component 属性指定渲染的组件

路由注意点

• 1 . 使用NavLink 组件激活后默认会增加 active class ， 可以做高亮效果
• 2 . 严格模式 : (1).NavLink 组件的to 属性，默认不是严格匹配，可以通过exact开启 . （2） . Route 组件的path属性，默认不是严格匹配，可以通过exact开启 （3） .Redirect 的 from属性， 默认不是严格匹配，可以通过exact开启
• 3 . 404 效果 ： Switch组件配合 不太 path的 Route组件，注意不带path的Route组件要放到最后
• 4 .使用Redirect（重定向） 的时候要包裹在 Switch组件里面，否则from属性会失效

路由嵌套

• 1 .子路由的路径一定会包含父路由
• 2 . 父路由Route 配置的时候不要加 exact

编程式导航

• 1 .useHistory：

import React from 'react'
import { useHistory } from 'react-router-dom'

export default function SongList(props) {
    const history = useHistory()
    const handleClick = () => {
        history.push('/mymusic')
    }
    return (
        <div>
            <h3>SongList</h3>
            <button onClick={handleClick}>MyMusic</button>
        </div>
    )
}

• 2 .props.history ：只能用于路由级别的组件

路由传参

• 1 动态路由传参 1.1 入口：

<NavLink className='nav-link' to='/findmusic/ranking/bsb'>    飙升榜</NavLink>

1.2 出口：

<Route path='/findmusic/ranking/:id' component={RankingList} />

1.3 获取 ： （1）. const params = useParams（） （2）. props.match.params.id

• 2 query 传参 1.入口 ：

<NavLink className='nav-link' to='/findmusic/ranking/?id=bsb'>
    飙升榜
</NavLink>

2 . 出口：

<Route path='/findmusic/ranking' component={RankingList} />

3 . 获取 location = useLocation() | props:

import qs from 'qs'
export default function RankingList(props) {
    const { id } = qs.parse(props.location.search.slice(1))
    return (
        <>
            <span className='me-3'>props 获取参数: {id}</span>
        </>
    )
}

组件

• 1 .传参 + 校验 （2）. 插槽 + 作用域插槽 （3） .自定义事件

同微宏执行顺序 ：

gitee.com/ifercarly/i…

防抖

1. 是什么

持续触发不执行，不触发的一段时间后才执行

2. 应用场景

根据输入的内容发请求

3. 生活中的例子

王者荣耀英雄回城

4. 如何封装

5. 实际我怎么用

lodash => _.debounce