react学习：react-router路由

问题导向

react生命周期何时调用？以及应用场景？

如果你都有了答案，可以忽略本文章，或去react学习地图寻找更多答案

---

简单使用

第一步：安装react-router-dom
yarn add react-router-dom

第二步：从react-router-dom引出路由组件
import {
    BrowserRouter, Switch, Route } from 'react-router-dom'

第三步：在App页面使用
import React from 'react'
import {
    BrowserRouter, Switch, Route } from 'react-router-dom'

import Home from './pages/home'
import Order from './pages/order'
import NotFount from './pages/notFount'

const App = () => {
   
    return (
        <>
            <BrowserRouter>
                <Switch>
                	<Redirect exact from='/' to='/home' />
                    <Route path="/home" component={
   Home} />
                    <Route path="/order" component={
   Order} />
                    <Route component={
   NotFount} />
                </Switch>
            </BrowserRouter>
        </>
    )
}
export default App

---

react-router-dom导出的组件

HashRouter 和 BrowserRouter 根容器
Switch 精准匹配
Route 路由规则
Link 声明式跳转
NavLink 声明式跳转 + 样式
Redirect 重定向
withRouter 高阶组件，将组件变成路由组件

---

HashRouter 和 BrowserRouter

定义：路由的根容器，记录浏览记录，并传入各组件数成员，任何组件都可以使用历史对象
HashRouter生成的路由地址前面会加一个#号

属性：basename统一前缀

<BrowserRouter basename="/api">
</BrowserRouter>

---

Switch

会匹配第一条符合的子规则，解决模糊匹配，不再需要exact
需要注意排序，从最特别的到最一般的，一般与404页面配合使用

---

Route

定义：路由规则，注册/定义路由
path属性：告诉路由什么URL地址
component属性：告诉路由去哪个组件，并向组件传递了3个属性，组件可通过props获取
如果想让路由规则，进行精确匹配，可以为 Route，添加 exact 属性，表示启用精确匹配模式

从路由规则中，提取匹配到的参数，可以使用props来访问

Route对象的3个属性：

• history：用来做命令式导航
• location：当前的URL信息
• match：用来获取参数信息

用法

第一种：
<Route exact path="/home" component={
   Home} />
    
第二种：该方式获取不到路由对象
<Route path="/home" component={
   () => <Home />} />

第三种：传递参数
<Route path="/home/:type/:id" component={
   Home} />