React router

React router

这篇文章来谈一谈react路由。react路由有它自己的官网。

功能概述 v6.6.0 |反应路由器 (reactrouter.com)

react的路由分为几种

web	pc
native	移动使用的
any	pc-移动都可以使用

2020以前是router@5，现在我们router@6符合函数组件写法。

用法：

首先，安装router

npm i react-router-dom

安装好后，使用router

1.使用router内置标签link进行路由跳转，但渲染到页面上最终的还是a标签

2.Link组件需要配置to=‘设置路由地址’

<Link to="/asdf">显示asdf组件</Link>

3.如果仅仅是写了link组件，控制台会报错，使用路由组件必须需要被某种模式调用BrowserRouter(history模式)

4.路由出口

使用《Routes/》组件进行包裹，路由出口

​ Route路由组件进行显示

​ 路由使用path属性 对应的组件使用element属性

<Route path="/qwe"  element={<组件>}></Route>

5.如果按照上面那种写法，一旦路由多了起来，就非常难看，所以React提供了类似与Vue中写路由方式一样的路由表

​ 1. 通过useRoutes进行设置

​ 2. router文件夹 进行抽离路由

import { Link, useRoutes } from "react-router-dom"
import route from "./router/index"

// 创建App组件
export default function App() {
    //设置路由表 
    const router = useRoutes(route)
    return (
        <div className='box'>
            {/* 路由入口 */}
            <Link to="/">默认</Link>---
            <Link to="/home">显示home组件</Link>---
            <Link to="/login">显示login组件</Link>

            <div>
                {/* 显示路由组件 */}
                <h2>路由出口</h2>
                {router}
            </div>
        </div>
    )
}

import Home from "../pages/Home"
import Login from "../pages/Login"
import Default from "../pages/Default"

const route = [
    {
        path:"/",  // (匹配key)进行输出路由组件
        element: <Default />  // 输出路由组件
    },
    {
        path:"/home",  // (匹配key)进行输出路由组件
        element: <Home />
    },
    {
        path:"/login",  // (匹配key)进行输出路由组件
        element: <Login />
    },
]

export default route

标签高亮 navLink

它的className属性中，如果接受一个回调函数，那么第一个参数是个自动传参。如果点了，isActive就是true，如果没点，就是false。可以根据这个返回不同的类名，从而实现标签的高亮。

嵌套路由

1. 显示asdf组件

​ 1. to不需要写 /名称 写了就一级路由

​ 2. 子路由出口 Outlet组件

​ 3. 书写路由表 => 进行书写匹配规则

​ chilnren:[{

​ path:“child”, 不需要写 /名称 写了就一级路由

​ element: ,

​ }]

如果是原生Route组件，如果写children的话，应该也是在属性上，这样嵌套比较麻烦！！！！

传递参数

serach传递参数

​ Home子路由入口1

​ 路由组件怎么接收?

​ const [serach] = useSearchParams()

​ let name = serach.get(“属性名”)

---

​ state传递参数

​ Home子路由入口1–

​ 路由组件怎么接收?

​ const {state:{name,sex,age}} = useLocation()

​ useLocation里面有state属性，可以直接解构，将属性拿取出来

​

动态路由

现在路由表中配置

/:name/:id/···这种格式

然后可以在Link组件中传递参数了。

 <Link to="Child/zhuque/12">去到孩组件</Link>
            <Link to="Child/kangkang/18">去到孩组件</Link>

如何接受动态路由参数呢？

react-route给我们提供了一种api

useParams() 动态·路由参数都在这个里面包裹着！

---

编程式导航

编程式导航就是通过点击，跳转到某个导航。在Vue中就是类似于router.push()

react中编程式导航用法

import {useNavigate} from 'react-router-dom'

然后创建一个navigate对象

navigate(to,options) options 配置对象

​ replace false 是往历史记录中添加

​ true 是覆盖

---

​ state 传递数据

​ navigate(number) 根据浏览器的历史进行跳转

​ number 正数前进

​ 负数后退.

---

以上就是我们在react-router中常用的一些东西了，如果读者想要更加深入，可以去往官网查看！

功能概述 v6.6.0 |反应路由器 (reactrouter.com)