React 路由的使用以及bug规避：路由跳转、路由传参、嵌套路由

2023-06-29 150

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： React 路由的使用以及bug规避：路由跳转、路由传参、嵌套路由

React 路由

准备

react路由在使用前需要装包

npm i react-router-dom@5.3.0
• 1

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

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

说明：

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>
• 1

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

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

react的参数传递

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

<Link to='/cart/3'>购物车</Link>
<Route path='/cart/:id' exact  component={Cart}></Route>
• 1
• 2
• 3

路由跳转后接参

有两种接参方式

1. useParams

使用useParams接参前，需要引入

import { useParams } from "react-router-dom"
const params = useParams()
console.log(params);  // 这里打印的就是路由携带的参数
• 1
• 2
• 3
• 4

2. props

直接使用props接参

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

路由跳转&&编程式导航

路由跳转的4种方式

使用 history 对象

import { useHistory } from "react-router-dom"
const history = useHistory()
• 1
• 2
• 3

1. push和goBack

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

2. go

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

3. replace

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

history.replace和push的区别

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

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

示例

push

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

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

replace

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

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

嵌套路由

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

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>