reactjs18 中使用路由技巧

react18 版本中,路由的用法发生了变化,react18 版本中,路由由 react-router-dom 包提供。与 react-router 包不同的是,react-router-dom 包提供了 createBrowserRouter 方法,该方法可以创建路由对象。总之,react-router6.x 版本的用法越来越接近 vue3.x 版本,互相借鉴互相学习,vue3 抄 react 的 hooks,react 18抄 vue 的 router 使用方式。

1. 安装依赖

npm install react-router-dom --save

2. 创建路由组件

在根目录下面创建 router 文件夹,在 router 文件夹下面创建 index.js 文件

import { createBrowserRouter } from "react-router-dom";
import Article from "../pages/Article";
import Login from "../pages/Login";const router = createBrowserRouter([{path: "/login",element: <Login />,},{path: "/article",element: <Article />,},
]);export default router;

3. 在 App.js 中引入路由

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import store from "./store";
import { RouterProvider } from "react-router-dom";
import router from "./router";const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<React.StrictMode><Provider store={store}>{/* {" 注册store "} */}<RouterProvider router={router}>{/* {"注册路由 "} */}<App /></RouterProvider></Provider></React.StrictMode>
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

懂 vue 的同学可以看出,这里注册 store,路由,其实和 vue 的 store,路由注册是一样的。
都是在入口文件中关联。只是方式略有差别。

4. 在组件中使用

1.路由传参的用法,第一种方式,查询参数和 vue 传参的用法基本一致。查询参数拼接在 url 后面,params 参数拼接在 url 后面。

import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";const Login = () => {// 编程式导航const navigate = useNavigate();const handleNavigate = (item) => {navigate(`/article?id=${item.id}&title=${item.title}`);};// 构造一个文章列表jsonconst articles = [{id: 1,title: "React",},{id: 2,title: "Vue",},{id: 3,title: "Angular",},{id: 4,title: "Flutter",},];const renderList = () => {return articles.map((item) => {return (<div key={item.id}><p><span>{item.title}</span><button onClick={() => handleNavigate(item)}>跳转</button></p></div>);});};return (<div><h1>Login</h1>{/* 声明式写法 */}<Link to="/article">文章页</Link><div>{renderList(articles)}</div></div>);
};export default Login;

5. 路由传参

目标页面接受参数,并渲染。

import { useSearchParams, useParams } from "react-router-dom";const Article = () => {//获取路由参数const [params] = useSearchParams();console.log("🚀 ~ Article ~ useSearchParams():", params);const id = params.get("id");const title = params.get("title");return (<div><h1>Article</h1><div><p>{id}</p><p>{title}</p></div></div>);
};export default Article;

请添加图片描述

2.路由传参的第二种方式,params 参数拼接在 url 后面。路径参数,在路由中声明。

const router = createBrowserRouter([{path: "/login",element: <Login />,},{path: "/article/:id/:title", // 路径参数,此处必须声明element: <Article />,},
]);

跳转页面方法更改

const handleNavigate = (item) => {navigate(`/article/${item.id}/${item.title}`);
};

目标页面接受参数,并渲染。

import { useSearchParams, useParams } from "react-router-dom";const Article = () => {//路由参数const params = useParams();const id = params.id;const title = params.title;console.log("🚀 ~ Article ~ title:", title);return (<div><h1>Article</h1><div><p>{id}</p><p>{title}</p></div></div>);
};export default Article;

请添加图片描述

这样就实现了基础的路由跳转与传参!!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

原码、反码、补码、移码的计算转换

文章目录 正数负数原码 & 反码反码 -> 补码原码 <-> 补码移码 <- Other 方法总结练习 正数 原码 和 反码 和 补码 都是一样的不会发生变化 因此&#xff0c;计算的时候先看第一位 符号位 &#xff0c;只要能发现是正数&#xff0c;三者都不变 移码 在补码基础…

《每天5分钟用Flask搭建一个管理系统》第5章:表单处理

第5章&#xff1a;表单处理 5.1 Web表单的基本概念 Web表单是收集用户输入的一种方式。在Flask中&#xff0c;表单通常与HTML表单结合使用&#xff0c;并通过POST方法提交。 示例代码&#xff1a;HTML表单 <!-- templates/login.html --> <form method"post&…

深入理解JVM的即时编译器(JIT)

在Java的世界里&#xff0c;即时编译器&#xff08;Just-In-Time Compiler&#xff0c;简称JIT&#xff09;是一个至关重要的组件&#xff0c;它负责将Java字节码转换成本地机器码&#xff0c;以提高程序的执行效率。本文将深入探讨JIT编译器的工作原理&#xff0c;并通过代码示…

飞凌嵌入式技术创新日(北京站)圆满落幕,共创嵌入式技术的美好未来

2024年6月25日下午&#xff0c;飞凌嵌入式技术创新日&#xff08;北京站&#xff09;在北京中关村皇冠假日酒店盛大举行。此次活动汇聚了近300位嵌入式技术领域的专家和企业代表&#xff0c;共享嵌入式技术的盛宴&#xff0c;共创嵌入式技术的美好未来&#xff01; 进入活动现场…

美国抗攻击服务器有哪些可靠的解决方案

美国抗攻击服务器在面对日益严重的网络安全威胁时&#xff0c;需要采取一系列可靠的解决方案来确保服务器的稳定运行和数据安全。以下是一些科普性质的抗攻击服务器解决方案&#xff1a; 一、流量清洗与过滤 流量清洗是美国抗攻击服务器应对DDoS攻击的重要措施。当检测到异常流…

DC-DC变换电路的研究与设计

通过使用MATLAB进行电路仿真以及通过制作实物进行验证&#xff0c;通过BUCK电路设计DC-DC来达到我们预期的效果&#xff0c;资料获取到咸&#x1f41f;&#xff1a;xy591215295250 \\\或者联系wechat 号&#xff1a;comprehensivable 设计要求&#xff1a;设计一个DC-DC 电源&a…

[Go Web] Kratos 使用的简单总结

文章目录 1.Kratos 简介2.传输协议3.日志4.错误处理5.配置管理6.wire 1.Kratos 简介 Kratos并不绑定于特定的基础设施&#xff0c;不限定于某种注册中心&#xff0c;或数据库ORM等&#xff0c;所以您可以十分轻松地将任意库集成进项目里&#xff0c;与Kratos共同运作。 API -&…

如何找合适的C++项目给自己的简历加分?

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「嵌入式的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; C的工作多种多样&#x…

端到端的自动驾驶--论坛分析

从Tesla开始&#xff0c;越来越多的企业和研究机构开始投身于端到端的自动驾驶模型&#xff0c;但是目前端到端的缺点是黑盒、不可读、不可解释。观看一些讲解和论坛后&#xff0c;个人觉得可解释的端到端模型将是未来的趋势。 视觉语言–大模型可以提供一些场景下的决策&#…

云原生之使用Docker部署RabbitMQ消息中间件

云原生之使用Docker部署RabbitMQ消息中间件 一、RabbitMQ介绍1.1 RabbitMQ简介1.2 RabbitMQ特点1.3 RabbitMQ使用场景 二、检查Docker环境2.1 检查Docker版本2.2 检查操作系统版本2.3 检查Docker状态 三、下载RabbitMQ镜像四、部署RabbitMQ服务4.1创建挂载目录4.2 运行RabbitMQ…

【Qt】QMessageBox 各种对话框的默认显示效果

1. 函数原型 void about(QWidget *parent, const QString &title, const QString &text)void aboutQt(QWidget *parent, const QString &title QString())QMessageBox::StandardButton critical(QWidget *parent, const QString &title, const QString &…

使用li标签实现数据列表效果(鼠标移动和选中时均有阴影效果)

文章目录 一、最终效果&#xff1a;二、完整页面代码 一、最终效果&#xff1a; 选中的数据有阴影效果&#xff0c;鼠标移动时也有阴影效果 二、完整页面代码 list-style-type: none是去掉无序标签前的点的样式 <template><div><div class"my-new-lis…

【React篇】父组件渲染时避免重复渲染子组件的3种处理方法

在 React 中&#xff0c;父组件渲染时要避免重复渲染子组件&#xff0c;可以使用以下方法&#xff1a; 使用 React.memo&#xff08;仅适用于函数式组件&#xff09;或 PureComponent&#xff08;适用于类组件&#xff09;&#xff1a; 这些方法可以帮助你创建在接收到新的 pr…

图论·搜索最短路径

例题地址 搜索最短路径 在网格图中按照特定路线搜索&#xff0c;搜索方式基于bfs/dfs需要搜索出一条源点与终点最短的路径 核心思路 无启发式函数&#xff1a;bfs/dfs有启发式函数&#xff1a;dijsktra算法,A*(Astar)… 个人理解 启发式函数&#xff1a;相当于根据点的权…

[沫忘录] Redis的配置与使用技巧

[沫忘录] Redis的配置与使用技巧 windows的Redis文件配置 windows下的redis文件配置信息主要集中在"redis.windows.conf"这一文件当中。 配置文件中以下参数可以设置Redis的内存大小和栈空间大小。 maxmemory 字节数 maxheap 字节数redis十大数据类型 key的常见…

打造坚固的SSH防护网:端口敲门入门指南

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 &#x1f38f;&#xff1a;你只管努力&#xff0c;剩下的交给时间 &#x1f3e0; &#xff1a;小破站 打造坚固的SSH防护网&#xff1a;端口敲门入门指南 前言什么是端口敲门端口敲门的优点1. 增强安全…

中介子方程三十六

XXFXXuXXWXXuXXdXXrXXαXXuXpXXKXηXiXXnXXiXηXKXXpXuXXαXXrXXdXXuXWXπXXWXeXyXeXbXπXpXXNXXqXeXXrXXαXXuXpXXKXηXiXXnXXiXηXKXXpXuXXαXXrXXeXqXXNXXpXπXbXeXyXeXWXXπXWXuXXdXXrXXαXXuXpXXKXηXiXXnXXiXηXKXXpXuXXαXXrXXdXXuXXWXXuXXFXXEXXyXXEXXrXXαXXuXpXXKXη…

Java_Java基础:HashCode详解

Hashcode的作用 java的集合有两类&#xff0c;一类是List&#xff0c;还有一类是Set。前者有序可重复&#xff0c;后者无序不重复。当我们在set中插入的时候怎么判断是否已经存在该元素呢&#xff0c;可以通过equals方法。但是如果元素太多&#xff0c;用这样的方法就会比较满…

【Python】Tkinter图形用户界面

窗口管理 tk.TK()&#xff1a;创建主窗口对象。 参数&#xff1a;无。 返回值&#xff1a;返回一个 Tkinter 主窗口对象。 import tkinter as tk root tk.Tk() # 创建主窗口root.mainloop()&#xff1a;启动 Tkinter 主事件循环&#xff0c;使窗口保持显示并等待用户交互…

网络扫描工具Nmap

一、Nmap简介 Nmap是一款功能强大的网络扫描工具&#xff0c;用于网络发现和安全审计。 Nmap&#xff0c;即网络映射器&#xff08;Network Mapper&#xff09;&#xff0c;是一个广受欢迎的开源工具&#xff0c;主要用于网络的主机发现、端口扫描、服务检测以及操作系统识别…