React 路由

准备

react路由在使用前需要装包

npm i react-router-dom@5.3.0

装完包后就可以在对应的页面使用了，下面是路由的几个常用方法

import { HashRouter as Router, Route, Link,NavLink,Switch,Redirect,useHistory } from 'react-router-dom'

说明：

HashRouter 哈希模式路由 —HashRouter as Router这种写法为取别名 Router

Route 路由组件 执行路由分发

Link 链接上显示的路由更新 类似于a标签

NavLink 路由更新 跟Link效果相同，但是NavLink上会有class类名active ，可以通过类名设置高亮

Switch 用Swich包裹路由组件，不管有多少个路由匹配成功，都只会显示第一个匹配的组件，不设置path属性，将404页对应的路由放在switch内部的最后位置，没有匹配到路由时会显示最后的那个404路由

Redirect 路由重定向

useHistory 路由历史模式

基础路由演示

import React from "react"
import './App.scss'

// 给路由取别名 Router  哈希模式
import { HashRouter as Router, Route, Link,NavLink,Switch,Redirect } from 'react-router-dom'

import Home from './Component/Home'
import GoodsClass from './Component/GoodsClass'
import Cart from './Component/Cart'
import My from './Component/My'
import Page404 from './Component/Page404'

export default function App() {

    return (
        <>
            <div>App
                <br />
                <Router>
                    <Link to='/home'>首页</Link>
                    <br />
                    <Link to='/goodsClass'>分类</Link>
                    <br />
                    <Link to='/cart'>购物车</Link>
                    <br />
                    <NavLink to='/my'>我的</NavLink>
                    <hr />

                    <Switch>
                       <Redirect from="/" exact to={'/home'}></Redirect>
                       <Route path='/home' exact  component={Home}></Route>
                       <Route path='/goodsClass' exact  component={GoodsClass}></Route>
                       <Route path='/cart' exact  component={Cart}></Route>
                       <Route path='/my'  component={My}></Route>
                       {/* 如果未匹配到路由则会显示404路由 配合Switch使用 */}
                       <Route component={Page404}></Route>
                    </Switch>
                </Router>
            </div>

        </>

    )
}

react路由使用的是模糊匹配，如果想要精准匹配的话需要在路由上加 exact 关键字

<Route path='/home' exact  component={Home}></Route>

路由组件中间不能有空格，否则会报错

<Route path='/home' exact  component={Home}> </Route>     {/* 中间有空格，报错 */}

react的参数传递

路由跳转的链接上可以携带参数，在组件上用 :id 携带

<Link to='/cart/3'>购物车</Link>

<Route path='/cart/:id' exact  component={Cart}></Route>

路由跳转后接参

有两种接参方式

1. useParams

使用useParams接参前，需要引入

import { useParams } from "react-router-dom"

const params = useParams()
console.log(params);  // 这里打印的就是路由携带的参数

2. props

直接使用props接参

export default function Cart (props) {
   console.log(props.match.params);   // 这里打印的就是路由携带的参数
}

路由跳转&&编程式导航

路由跳转的4种方式

使用 history 对象

import { useHistory } from "react-router-dom"

const history = useHistory()

1. push和goBack

// 页面回退 会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL
history.push('/home')

// 返回上一个页面 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL
history.goBack()

2. go

// 前进或后退到某个页面，参数 n 表示前进或后退页面数量（比如：-1 表示后退到上一页） 不会存储到历史记录中
history.go(-1)

3. replace

// 进入/home ,在历史记录中用目标记录来替换当前记录
history.replace('/home')

history.replace和push的区别

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

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

示例

push

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

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

replace

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

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

嵌套路由

在对应的子路由嵌套路由即可，跟父级路由的写法一样，下面是路由演示

import React from "react"
import { Route,NavLink,Switch,Redirect } from "react-router-dom"

import MyOrder from './MyOrder'
import MyGoods from './MyGoods'


export default function My () {
    return (
        <div>My
            <br />
            <ul>
                <li>
                  <NavLink to='/my/order'>我的订单</NavLink>
                </li>
                <li>
                <NavLink to='/my/goods'>我的商品</NavLink>
                </li>
            </ul>

            <Switch>
                <Redirect from='/my' exact to={'/my/order'}></Redirect>
                <Route path='/my/order' component={MyOrder}></Route>
                <Route path='/my/goods' component={MyGoods}></Route>
            </Switch>
        </div>
    )
}

嵌套路由重定向的小坑

如果子路由内有嵌套路由，在父级路由组件上不能加 exact 关键字，否则会匹配不上导致重定向失败

 {/* 当前路由为父级路由 如果跳转的路由页面内部有嵌套路由，则不能在当前页加exact */}
 <Route path='/my'  component={My}></Route>