【React-Router】路由导航

news2024/9/20 10:41:12

1. 概念

路由系统中的多个路由之间需要进行路由跳转,并且在跳转的同时有可能需要传递参数进行通信。

2. 声明式导航

// @/page/Login/index.js

import { Link } from 'react-router-dom'
const Login = () => {
  return <div>
    登录页
    {/* 解析成 a 链接 */}
    <Link to='/article'>跳转到文章页</Link>
    </div>
}
export default Login

image.png

3. 编程式导航

// @/page/Login/index.js
import { Link, useNavigate } from 'react-router-dom'
const Login = () => {
  const navigate = useNavigate()
  return <div>
    登录页
    <button onClick={() => navigate('/article')}>跳转到文章页</button>
    </div>
}

export default Login

image.png

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

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

相关文章

CentOS7 FTP服务创建

一、安装FTP sudo dnf install vsftpd 二、设置防火墙&#xff0c;允许访问FTP //给防火墙增加一个允许的ftp服务(--permanent永久生效,重启后依然生效) sudo firewall-cmd --permanent --zonepublic --add-serviceftp//修改完后需要重启防火墙 sudo firewall-cmd --reload …

C#使用whisper.net实现语音识别(语音转文本)

目录 介绍 效果 输出信息 项目 代码 下载 介绍 github地址&#xff1a;https://github.com/sandrohanea/whisper.net Whisper.net. Speech to text made simple using Whisper Models 模型下载地址&#xff1a;https://huggingface.co/sandrohanea/whisper.net/tree…

【kubernetes】k8s架构之节点

文章目录 1、集群架构示意图2、概述3、管理3.1 节点名称唯一性3.2 节点自注册3.3 手动节点管理 4、节点状态4.1 地址&#xff08;Addresses&#xff09;4.2 状况&#xff08;Condition&#xff09;4.3 容量&#xff08;Capacity&#xff09;与可分配&#xff08;Allocatable&am…

java:application.properties的详细使用以及区分环境

文章目录 什么是application.properties文件&#xff1f;如何在Java中使用application.properties文件&#xff1f;将数据注入到 Bean 中使用自定义的配置文件使用命令行参数进行配置配置文件的优先级加载外部的配置文件多环境配置1、创建配置文件2、在 application.properties…

Python语言:猜数字游戏案例讲解

猜数字游戏题目要求如下&#xff1a;该程序随机生成一个1到100之间的整数&#xff0c;然后要求玩家在有限的次数内猜出这个数字。如果玩家猜对了&#xff0c;游戏结束并显示成功信息&#xff1b;如果玩家猜错了&#xff0c;程序会提示玩家猜的数字是偏大还是偏小&#xff0c;并…

OpenLayers实战,WebGL图层根据Feature要素的变量动态渲染多种颜色、不同长度和不同透明度的长方形(矩形)图形,适用于大量矩形图形渲染

专栏目录: OpenLayers实战进阶专栏目录 前言 本章使用OpenLayers根据Feature要素的变量动态渲染多种颜色、不同长度和不同透明度的矩形(长方形、四边形和正方形)图形。 通过一个WebGL图层生成四种不同颜色、不同大小和不同透明度的矩形图形要素,适用于WebGL图层根据大量点…

ATFX汇市:非美货币扎堆升值,唯有USDCAD表现平平

ATFX汇市&#xff1a;10月4日至今&#xff0c;美元指数累计跌幅已经超过3.6%&#xff0c;最低触及103.18点&#xff0c;中期均线MA30被跌破&#xff0c;强势周期可能即将转变为弱势周期。随着美元的下跌&#xff0c;大部分非美货币快速升值&#xff0c;欧元、英镑、日元的升值幅…

以45°斜抛水平距离最远

已知&#xff1a;斜抛物体的初速度为 v 0 v_0 v0​&#xff08;与水平方向的夹角为 θ \theta θ&#xff09;&#xff0c;重力加速度为 g g g。 求&#xff1a;抛物轨迹方程&#xff1f; 垂直方向的速度为 v y v 0 sin ⁡ θ − g t v_yv_0 \sin \theta -gt vy​v0​sinθ−…

modbus协议及modbus TCP协议

一、Modbus协议 1.起源 Modbus由Modicon公司于1979年开发&#xff0c;是一种工业现场总线协议标准。 Modbus通信协议具有多个变种&#xff0c;其中有支持串口&#xff0c;以太网多个版本&#xff0c;其中最著名的是Modbus RTU&#xff08;通信效率最高&#xff0c;基于串口&am…

读不懂客户,就不足以谈商业成功

数字化的背后&#xff0c;是对顾客心理和行为的深度洞察。因此&#xff0c;品牌营销运营数字化&#xff0c;不仅仅是为了收集转化率数据&#xff0c;也需要通过设计数据指标&#xff0c;更深地了解顾客。 门店管理也是如此&#xff0c;打造未来空间的数智化管理方式&#xff0c…

中低压MOSFET 2N7002T 60V 300mA 双N通道 SOT-523封装

2N7002KW小电流双N通道MOSFET&#xff0c;电压60V电流300mA&#xff0c;采用SOT-523封装形式。低Ros (on)的高密度单元设计&#xff0c;压控小信号开关&#xff0c;具有高饱和电流能力&#xff0c;ESD保护。可应用于直流/直流转换器&#xff0c;电池开关&#xff0c;便携式设备…

IDEA 配置maven结合案例使用篇

1. 项目需求和结构分析 需求案例&#xff1a;搭建一个电商平台项目&#xff0c;该平台包括用户服务、订单服务、通用工具模块等。 项目架构&#xff1a; 用户服务&#xff1a;负责处理用户相关的逻辑&#xff0c;例如用户信息的管理、用户注册、登录等。 spring-context 6.0.…

CentOS 7 升级gcc/g++ 至7.3、8.3、9.3

功能需求&#xff1a;CentOS 7 编译安装spdlog-1.12.0 提示如下错误信息&#xff1a; [rootlocalhost build]# cmake .. && make -j -- Build spdlog: 1.12.0 -- Build type: Release -- Generating example(s) -- Generating install -- Configuring done -- Generat…

02房价预测

目录 代码 评分算法&#xff1a; 代码 import numpy as np from sklearn import datasets from sklearn.linear_model import LinearRegression# 指定版本才有数据集 # C:\Users\14817\PycharmProjects\pythonProject1\venv\Scripts\activate.bat # pip install scikit-le…

云服务器-从零搭建前后端服务

使用须知 选择0M带宽不能访问公网&#xff08;不分配公网IP&#xff09;&#xff0c;如需分配公网IP请增加带宽值。云服务器ECS默认不开启虚拟内存如您需要使用请登录云服务器内部操作。Linux开启swap&#xff08;虚拟内存&#xff09;、Windows虚拟内存的设置若您购买了数据盘…

2023-11-21 LeetCode每日一题(美化数组的最少删除数)

2023-11-21每日一题 一、题目编号 2216. 美化数组的最少删除数二、题目链接 点击跳转到题目位置 三、题目描述 给你一个下标从 0 开始的整数数组 nums &#xff0c;如果满足下述条件&#xff0c;则认为数组 nums 是一个 美丽数组 &#xff1a; nums.length 为偶数对所有满…

如何使用 Navicat 连接 GaussDB 主备版

Navicat Premium&#xff08;16.2.8 Windows版或以上&#xff09; 已支持对GaussDB 主备版的管理和开发功能。它不仅具备轻松、便捷的可视化数据查看和编辑功能&#xff0c;还提供强大的高阶功能&#xff08;如模型、结构同步、协同合作、数据迁移等&#xff09;&#xff0c;这…

Leetcode——169 多数元素

我的答案 class Solution {public int majorityElement(int[] nums) {int len nums.length;Arrays.sort(nums);int count 1;int res 0;if(len 1){return nums[0];}for(int i0; i<len-1; i){if(nums[i]nums[i1]){count;}else{count 1;}if(count>len/2){res nums[i]…

JavaDS —— 初识集合框架 + 时间/空间复杂度

目录 1. 初识集合框架 1.1 集合框架的初识 1.2 什么是数据结构&#xff1f; 2. 时间与空间复杂度 2.1 时间复杂度 2.2 大O的渐进表示法 2.3 常见时间复杂度计算举例 2.4 空间复杂度 1. 初识集合框架 1.1 集合框架的初识 什么叫集合&#xff1f;什么叫框架&#xff1f;什么又叫集…

用友NC Cloud uploadChunk任意文件上传漏洞复现 [附POC]

文章目录 用友NC Cloud uploadChunk任意文件上传漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 用友NC Cloud uploadChunk任意文件上传漏洞复现 [附POC] 0x01 前言 免责声明&#xff1a;请勿利…