ReactRouter——路由配置、路由跳转、带参跳转、新route配置项

目录

写在前面

(一)初步使用router

1.安装react-router-dom

2.创建router结构 

3.嵌套路由

4.配置not found页面

(1)确切路由报错页面

(2)未配置路由报错页面

5.重定向

(二)路由跳转

1.组件跳转

3.js跳转 

(三)传递参数

1.searchParams(query)参数

2.params参数

(四)新增route配置项

1.loader

2.action

3.lazy

(六)总结

写在前面

目前准备先学习react-router 6的版本，后续旧版本的可能会另外记录

(一)初步使用router

Home v6.23.1 | React Router

1.安装react-router-dom

npm i react-router-dom

2.创建router结构 

直接来看代码！  

路由可以选择多种类型：

createBrowserRouter：history路由（推荐）

createHashRouter：哈希路由（不推荐）

createMemoryRouter：有自己的一套路由记忆栈，用于生产开发工具、无浏览器环境使用

createStaticRouter：用于服务器

Picking a Router v6.23.1 | React Router

// src/router/index.jsx
import { createBrowserRouter } from "react-router-dom";
import Home from "../views/Home";
import Login from "../views/Login";

const router = createBrowserRouter([
    {
        path:'/',
        element: <Home />,
    },
    {
        path:'/login',
        element: <Login />,
    }
])

export default router

这个文件后缀必须是jsx，js解析不了组件 

首先能看到开始使用方法来搭建router，而不是使用<BrowserRouter />这种组件式创建路由

createBrowserRouter这种称之为 data API，是6.4版本的新型api，虽然目前react native不支持，但很快就会支持这种写法。 

静态组件：

创建components文件夹存放静态组件，基本操作了 

路由组件：

创建views文件夹存放路由组件 

// src/views/Home.jsx
export default function Home(){
    return (
        <>
            <div className="main">
                <h1>这里是home页</h1>
            </div>
        </>
    )
}

将router挂载到app.jsx(直接挂载到main.jsx也ok的)

使用RouterProvider组件将路由组件放到header和footer组件之间，再将刚刚配置的router传入router项

有点意思嗷，这不就是vue的router-view？？不过目前还不确定具体有什么相似之处

import { RouterProvider } from "react-router-dom"
import router from "./router"
import Header from "./components/Header"
import Footer from "./components/Footer"
import './app.css'

function App() {
  return (
    <>
      <div className="app">
        <Header></Header>
        <RouterProvider router={router} />
        <Footer></Footer>
      </div>
    </>
  )
}

export default App

3.嵌套路由

在有路由子组件的路由父组件上放一个<Outlet />组件占位

// home.jsx
import { Outlet } from "react-router-dom"
<div className="main">
    <h1>这里是home页</h1>
    <div className="layout"></div>
    <div className="content">
        <Outlet />
    </div>
</div>

再在router结构中配置子路由：

// router/index.jsx
    {
        path:'/home',
        element: <Home />,
        errorElement:<ErrorPage />,
        children: [
            {
                path: "content",
                element: <Content />,
            },
        ],
    },

 欧了，能显示子路由了！这个Outlet的功能跟vue的router-view肯定就是一模一样了

4.配置not found页面

先编写一个通用的errorPage页面

useRouteError hook会获取到该路由报错信息 

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

export default function ErrorPage(){
    const routerError = useRouteError()
    return (
        <>
            <div className="main">
                <h1>this page is not found!</h1>
                <p>{routerError}</p>
            </div>
        </>
    )
}

(1)确切路由报错页面

errorElement v6.23.1 | React Router

当loader、actions配置项或者组件渲染抛出错误时，会展示errorPage页面 

const router = createBrowserRouter([
    {
        path:'/',
        element: <Home />,
        errorElement:<ErrorPage />
    },
    {
        path:'/login',
        element: <Login />,
        errorElement: <ErrorPage />
    },
])

还没学到loader、action，要晚点才能展示这个的作用了 

(2)未配置路由报错页面

和router以前版本一样 路径写成通配符 

const router = createBrowserRouter([
    {
        path:'/',
        element: <Home />,
        errorElement:<ErrorPage />
    },
    {
        path:'/login',
        element: <Login />,
        errorElement: <ErrorPage />
    },
    {
        path:'*', // 通配符 代表除上面提到的路径，其他都会直接显示errorPage页面
        element:<ErrorPage />
    }
])

5.重定向

Navigate v6.23.1 | React Router

使用Navigate组件实现路由重定向

to:前往路由  replace:是否替换历史堆栈中的当前条目

<Navigate to="/xxx" replace={true} /> 

既可以在组件处重定向，也可以在router结构里重定向

const router = createBrowserRouter([
    {
        path:'/',
        element: <Navigate to="/home" replace />,
        errorElement:<ErrorPage />,
    },
    {
        path:'/home',
        element: <Home />,
        errorElement:<ErrorPage />,
        children: [
            {
                path: "content",
                element: <Content />,
            },
        ],
    },

这样网页打开时/路径就直接跳转到/home路由了

(二)路由跳转

1.组件跳转

Link v6.23.1 | React Router

用法和vue的router-link差不多，哎哟这小味上来了

要注意的是：to的路径写成content是跳转到/home/content，写成/content会直接跳转到/content路径！ 

// home.jsx
<div className="main home">
    <div className="layout">
        <h3>这里是home页</h3>
        <Link to="content">content</Link>
        <Link to="content2">content2</Link>
    </div>
    <div className="content">
        <Outlet />
    </div>
</div>

 

NavLink v6.23.1 | React Router

使用navlink跳转和link的操作都一致，唯一不同的是，使用navlink跳转到目标路由后，该a标签会新增一个active类

因此，可以用于列表栏展示活跃标签的功能，将active的a标签颜色改为红色

<NavLink to="content">content</NavLink>
<NavLink to="content2">content2</NavLink>

.active{
    color: red;
}

当需要active的样式太多， 可以改变a标签活跃的类名

<NavLink to="content" className={
    ({ isActive }) => (isActive ? 'nav-active' : '')
}>content</NavLink>
<NavLink to="content2" className={
    ({ isActive }) => (isActive ? 'nav-active' : '')
}>content2</NavLink>

.nav-active{
    color: red;
}

或者是直接修改样式

<NavLink to="content" style={
    ({ isActive }) => ({ color: isActive ? 'red' : '' })
}>content</NavLink>
<NavLink to="content2" style={
    ({ isActive }) => ({ color: isActive ? 'red' : '' })
}>content2</NavLink>

style和className属性都需要传递一个回调函数，取得的形参就是react提供的数据，更多数据直接看文档吧，毕竟这个组件不常用

3.js跳转 

useNavigate v6.23.1 | React Router

使用useNavigate hook跳转， 第一个参数：路径，第二个参数：路由选项，剩余选项直接看文档

import { useNavigate } from "react-router-dom"
export default function Home() {
    const navigate = useNavigate()
    const goLogin = () => {
        // 代码跳转路由
        navigate('/login', { replace: false })
    }
    return (
        <>
            <div className="main home">
                <div className="layout">
                    <h3>这里是home页</h3>
                    <button onClick={goLogin} >登录</button>
                    ...
        </>
    )

(三)传递参数

1.searchParams(query)参数

useSearchParams v6.23.1 | React Router

通过路径传参

// home.jsx
const navigate = useNavigate()
const goLogin = () => {
        // 代码跳转路由
        navigate('/login?name=csq&age=100', { replace: false })
    }

通过useSearchParams hook接收

import { useSearchParams } from "react-router-dom"
export default function Login(){
    const [searchParams, setSearchParams] = useSearchParams()
    const name = searchParams.get('name')
    const age = searchParams.get('age')
    return (
        <>
            <div className="main">
                <h1>这里是Login页</h1>
                <p>name:{name}</p>
                <p>age:{age}</p>
            </div>
        </>
    )
}

 这个hook除了获取query参数外，结构还蛮丰富的，甚至还能setSearchParams。。

就是不太清楚具体用处，后面遇到了就补

2.params参数

这种直接用斜杠分隔路径和数据

// home.jsx
    const navigate = useNavigate()
    const goLogin = () => {
        // params传参
        navigate('/login/csq/100')
    }

在router结构里先声明

：表示params参数， ？表示可选 

    {
        path:'/login/:name/:age?',
        element: <Login />,
        errorElement: <ErrorPage />
    },

在login组件获取传递来的参数

使用useParams hook获取传递来的params参数，这种方式拿参数比较方便，直接解构就能拿，上一个要一个一个get，有点麻烦 ；不过上一种不需要配置router，蛮难选哈QAQ

import { useParams } from "react-router-dom";
export default function Login(){
    const {name, age} = useParams()
    return (
        <>
            <div className="main">
                <h1>这里是Login页</h1>
                <p>name:{name}</p>
                <p>age:{age}</p>
            </div>
        </>
    )
}

(四)新增route配置项

1.loader

loader v6.23.1 | React Router  

在路由组件渲染前使用loader获取数据

可以进行异步操作，如果抛出错误会被useRouteError获取到 

只有data api可以使用该配置 

// router/index.jsx
import Content, { loader as contentLoader } from "../views/Content";
{
    path: "content",
    element: <Content />, 
    errorElement: <ErrorPage />,
    loader: contentLoader,
},

用promise模拟请求失败的情况，在1s后抛出错误，页面被更改为errorpage页面

// content.jsx
// 用于请求
export const loader = async () => {
    // 模拟请求失败
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('请求失败！')
        }, 1000)
    }).then(res => {
        console.log(res);
    }).catch(err => {
        throw (err)
    })
}

export default function Content() {
    
    return (
        <>
            <h1>这里是Content页!!</h1>
        </>
    )
}

 

2.action

action v6.23.1 | React Router

Route actions are the "writes" to route loader "reads". They provide a way for apps to perform data mutations with simple HTML and HTTP semantics while React Router abstracts away the complexity of asynchronous UI and revalidation. This gives you the simple mental model of HTML + HTTP (where the browser handles the asynchrony and revalidation) with the behavior and UX capabilities of modern SPAs.  

路由操作是对路由加载程序“读取”的“写入”。它们为应用程序提供了一种通过简单的HTML和HTTP语义执行数据突变的方法，而React Router则抽象掉了异步UI和重新验证的复杂性。这为您提供了HTML+HTTP的简单心理模型（其中浏览器处理异步和重新验证）以及现代SPAs的行为和用户体验功能。

。。。说实话有点理解不到，也没理解到和loader的关系。。先都放在这里 后续来补充

3.lazy

lazy v6.23.1 | React Router

照着文档写的懒加载怎么没有用。。

后面再来看看吧 累了 哎

(五)路由守卫

(六)总结

终于学到router了！

今天主要是根据文档学的6.4相关的router，和现在常用的应该还是有点出入，肯定多看看就完事儿了！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/694561.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

ubuntu使用docker安装openwrt

ubuntu使用docker安装openwrt

系统&#xff1a;ubuntu24.04 架构&#xff1a;x86 1. 安装docker 1.1 离线安装 docker下载地址 根据系统版本&#xff0c;依次下载最新的三个关于docker的软件包 container.io&#xff08;注意后缀版本顺序&#xff09;docker-ce-clidocker-ce 然后再ubuntu系统中依次按顺…
阅读更多...
如何自动化地评估 AIGC 生图的质量？

如何自动化地评估 AIGC 生图的质量？

节前&#xff0c;我们星球组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学。 针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 合集&#x…
阅读更多...
【Spring Boot】异常处理

【Spring Boot】异常处理

异常处理 1.认识异常处理1.1 异常处理的必要性1.2 异常的分类1.3 如何处理异常1.3.1 捕获异常1.3.2 抛出异常1.3.4 自定义异常 1.4 Spring Boot 默认的异常处理 2.使用控制器通知3.自定义错误处理控制器3.1 自定义一个错误的处理控制器3.2 自定义业务异常类3.2.1 自定义异常类3…
阅读更多...
Cweek4+5

Cweek4+5

C语言学习 十.指针详解 6.有关函数指针的代码 代码1&#xff1a;(*(void (*)())0)(); void(*)()是函数指针类型&#xff0c;0是一个函数的地址 (void(*)())是强制转换 总的是调用0地址处的函数&#xff0c;传入参数为空 代码2&#xff1a;void (*signal(int, void(*)(int))…
阅读更多...
AE电源pinnacle软件新款老款二款软件

AE电源pinnacle软件新款老款二款软件

AE电源pinnacle软件新款老款二款软件
阅读更多...
高速USB转串口芯片CH343

高速USB转串口芯片CH343

CH343封装 截止目前&#xff0c;主要封装有 SOP16: CH343G QFN16: CH343P ESSOP10: CH343K,截止24年6月未生产 CH343串口速度 最高串口速度&#xff1a; 6Mbps,比CH340的2M&#xff0c;快3倍 1、概述 参考版本&#xff1a;1E CH343 是一个 USB 总线的转接芯片&#xff0c;…
阅读更多...
国标GB/T 28181详解：校时流程详细说明

国标GB/T 28181详解：校时流程详细说明

目录 一、定义 二、作用 1. 时间同步性 2. 事件记录的准确性 3. 跨平台、跨设备协作 4. 降低时间误差 5. 安全性提升 三、基本要求 四、命令流程 五、协议接口 六、校时效果 1、未校时的情况 2、校时后的效果 七、参考 一、定义 GB28181协议要求所有的监控设…
阅读更多...
把系统引导做到U盘，实现插上U盘才能开机

把系统引导做到U盘，实现插上U盘才能开机

前言 有个小伙伴提出了这样一个问题&#xff1a;能不能把U盘制作成电脑开机的钥匙&#xff1f; 小白稍微思考了一下&#xff0c;便做了这样一个回复&#xff1a;可以。 至于为什么要思考一下&#xff0c;这样会显得我有认真思考他提出的问题。 Windows7或以上系统均支持UEF…
阅读更多...
Cannot access spring-snapshot (https://repo.spring.io/snapshot) in offline mode

Cannot access spring-snapshot (https://repo.spring.io/snapshot) in offline mode

Maven报错 这个选项是脱机工作&#xff0c;意思就是不读取远程仓库&#xff0c;只读取本地已有的仓库&#xff0c;之所以报错原因就是本地仓库是空的&#xff0c;然而选择了脱机工作
阅读更多...
Android.mk文件生成的so工程文件并Debug调试native code

Android.mk文件生成的so工程文件并Debug调试native code

1.这里主要展示一下从最原始先新建一个工程 2.将hello的子工程文件放入上面新建好的工程里面&#xff0c;直接拷贝放置这里 3.修改根目录下的settings.gradle 加入hello 4.app工程下的build.gradle加入依赖&#xff0c;这样就可以识别hello中的java包文件 5.MainActivity 中来&…
阅读更多...
Redis主从同步

Redis主从同步

master如何得知salve是否是第一次来同步呢&#xff1f;&#xff1f; 有几个概念&#xff0c;可以作为判断依据&#xff1a; Replication Id&#xff1a;简称replid&#xff0c;是数据集的标记&#xff0c;replid一致则是同一数据集。每个master都有唯一的replid&#xff0c;s…
阅读更多...
C++初阶学习第六弹——探索STL奥秘（一）——标准库中的string类

C++初阶学习第六弹——探索STL奥秘（一）——标准库中的string类

前言&#xff1a; 在前面&#xff0c;我们学习了C的类与对象&#xff0c;认识到了C与C语言的一些不同&#xff0c;今天&#xff0c;我们将进入C的 关键部分——STL&#xff0c;学习完这部分之后&#xff0c;我们就可以清楚的认识到C相比于C语言的快捷与便利 目录 一、为什么有s…
阅读更多...
【MySQL】（基础篇四） —— 检索数据

【MySQL】（基础篇四） —— 检索数据

检索数据 检索数据是我们使用数据库时进行最多的操作&#xff0c;其中包括了检索条件、排序、过滤、分组等等。我会在后续的多篇博客中为你进行详细地介绍它们。 这次先让我们来粗略的了解一下SELECT&#xff0c;为了使用SELECT检索表数据&#xff0c;必须至少明确两点信息—…
阅读更多...
Linux：动态库和静态库的编译与使用

Linux：动态库和静态库的编译与使用

目录 1.前言 2.静态链接库 3.静态链接库生成步骤 4.静态链接库的使用 5.动态链接库 6.动态链接库生成步骤 7.动态链接库的使用 8.动态链接库无法加载 9.解决动态链接库无法加载问题 前言 在《MinGW&#xff1a;从入门到链接库》博客中简单介绍了如何编译动态链接库和静态链接库…
阅读更多...
python - pandas常用计算函数

python - pandas常用计算函数

文中所用数据集有需要的可以私聊我获取 学习目标 知道排序函数nlargest、nsmallest和sort_values的用法 知道Pandas中求和、计数、相关性值、最小、最大、平均数、标准偏差、分位数的函数使用 1 排序函数 导包并加载数据集 import pandas as pd ​ # 加载csv数据, 返回df对…
阅读更多...
MySQL之多表查询—行子查询

MySQL之多表查询—行子查询

一、引言 上篇博客学习了列子查询。 接下来学习子查询中的第三种——行子查询。 行子查询 1、概念 子查询返回的结果是一行&#xff08;当然可以是多列)&#xff0c;这种子查询称为行子查询。 2、常用的操作符 、 <> (不等于) 、IN 、NOT IN 接下来通过一个需求去演示和…
阅读更多...
系统思考—心智模式

系统思考—心智模式

凯恩斯说&#xff1a;“介绍新观念倒不是很难&#xff0c;难的是清除那些旧观念。”在过去的任何一年&#xff0c;如果你一次都没有推翻过自己最中意的想法&#xff0c;那么你这一年就算浪费了。旧观念像是根深蒂固的杂草&#xff0c;即使在新知识的光照下&#xff0c;也需要时…
阅读更多...
stream 流的一些底层实现原理

stream 流的一些底层实现原理

闭包 闭包的底层实现?外层的变量成为方法的一部分会生成一个lambda方法&#xff0c;将源本的2个参数转化3个参数此时变量就成为了方法的一部分值是如何传递的呢?会有一个专门的类用于存储此变量的值 流的切分后再并行 数组或者是集合&#xff0c;需要用到一个可切分的迷代器这…
阅读更多...
如何一键拷贝PPT中的所有文字？

如何一键拷贝PPT中的所有文字？

有时我们可能需要引用PPT的文字&#xff0c;但一个幻灯片一个幻灯片拷贝很是麻烦&#xff0c;我们想一键拷贝PPT中所有幻灯片中的内容&#xff08;最近我就遇到了这个需求&#xff09;。今天就来讲讲这个一键拷贝的技巧。因为大家可能会遇到同样的问题&#xff0c;所以在此记录…
阅读更多...
[Vue-常见错误]浏览器显示Uncaught runtime errors

[Vue-常见错误]浏览器显示Uncaught runtime errors

文章目录 错误描述正确写法具体如下 错误描述 当前端代码发生错误时&#xff0c;浏览器中出现以下错误提示。 正确写法 显然这不是我们所期望的&#xff0c;在vue.config.js中配置如下设置关闭Uncaught runtime errors显示 devServer: {client: {overlay: false}具体如下 …
阅读更多...
最新文章

Copyright @ 2022~2023