React 路由 === 小记

1.下包

yarn add react-router-dom@5.3.0

2.react-router-dom 这个包提供了三个核心的组件。

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

可以使用as进行重命名

常用两种Router

• HashRouter：使用 URL 的哈希值实现（http://localhost:3000/#/first），是通过监听 window 的 hashchange 事件来实现的。

• BrowserRouter：使用 H5 的 history API 实现（http://localhost:3000/first），是通过监听 window 的 popstate 事件来实现的。

3.使用

  1.HashRouter :使用 HashRouter 包裹整个应用，一个项目中只会有一个 HashRouter 。

<HashRouter>
    <div className="App">App</div>
</HashRouter>

   2.Link :使用 Link 指定导航链接。   相当于a标签

<Link className='nav-link' to='/findmusic'>
    xxxx
</Link>

  3.Route:使用 Route 指定路由规则。

// 在哪里写的 Route，最终匹配到的组件就会渲染到哪里
<Route path='/findmusic' component={FindMusic} />

4.路由的执行过程

1. 点击 Link 组件（a 标签），浏览器地址栏中的 url 发生变化。

2. ReactRouter 通过 hashchange 或 popState 监听到了地址栏 url 的变化。

3. ReactRouter 内部遍历所有 Route 组件，使用路由规则（path）与 pathname（hash）进行匹配。

4. 当路由规则（path）能够匹配地址栏中的 pathname（hash）时，就展示该 Route 对应的组件。

5.NavLink

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

  a，to：用于指定地址，会渲染成 a 标签的 href 属性。

  b，activeClass：用于指定高亮的类名，默认 active。

  c，exact：精确匹配，表示必须精确匹配类名才会应用 class，默认是模糊匹配。

• 模糊匹配: NavLink 组件 to 属性对应的值如果是 /，则表示，只要是以 / 开头的就会被添加 class，当访问 /abc的时候，发现是以 / 开头的，所以这里也加了 class。 添加 exact 属性，表示必须是 / 才会被加 class

<NavLink exact to='/'>
    首页
</NavLink>

6.Switch 与 404

• 通常，会把一个个的 Route 包裹在一个 Switch 组件中，这样只会渲染第一个匹配到的组件，往往是我们期望的。

• 通过 Switch 组件配合不带 path 属性的 Route 组件能实现 404 效果，即便不需要实现 404，也可以用 Switch 包裹来提升性能。

<Switch>
    <Route exact path='/' component={FindMusic} />
    <Route path='/mymusic' component={MyMusic} />
    <Route path='/myfollow' component={MyFollow} />
    <Route component={NotFound}></Route>
</Switch>

7.编程式导航

• 第一种方式通过 props 拿到 history 进行跳转，props.history.push('/comment')。

• 第二种方式通过 react-router-dom 提供的 useHistory 勾子进行跳转。  

    import { useHistory } from 'react-router-dom'
···
    const history = useHistory()
    history.push('/xxx')

8.路由传参

动态路由传参：

入口：

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

出口：

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

获取：

// props.match.params.id 或者通过 useParams()

Query 传参：

入口：

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

出口：

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

获取：

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>
        </>
    )
}

qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。

npm install qs
import qs from 'qs’
qs.parse()是将URL解析成对象的形式
qs.stringify()是将对象 序列化成URL的形式，以&进行拼接