Next.js开发中使用useRouter实现点击返回到上一页

在使用Next.js框架做前端页面开发时,如果想返回到上一页,可以利用useRouter钩子提供的back()方法,可以这样做:

import {useRouter} from "next/navigation";
import {Space} from "antd";
import {ArrowLeftOutlined} from '@ant-design/icons';

const {Text} = Typography;

export default function Page() {
	    const router = useRouter()
    	const goBack =()=>{
        	router.back()
   	 	}
	return (
		<>
		<Space>
	       <ArrowLeftOutlined 
		       className=" top-4 left-4 mr-10 text-xl"
		       style={{fontSize: '28px', color: '#4A2AF0'}} 
		       onClick={goBack}/>
	       <Text>我参加的大赛</Text>
		</Space>
	</>
	)
}

效果:
在这里插入图片描述
当点击蓝色图标时就会返回到上一页

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

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

相关文章

tiaoshixitong

data_interval : 当是ubus 时 重新赋值为 3&#xff1b;当是ws 时 重新赋值为 20&#xff1b; 1. 如何理解data_tik &#xff1f; 在函数can_packet_check_timer 定时can发送函数里面&#xff0c;data_tik 作为倒计时时间&#xff0c;当倒计时间到&#xff0c;则发送。…

LCB模型引领机器人进入端到端新维度

论文标题&#xff1a; From LLMs to Actions: Latent Codes as Bridges in Hierarchical Robot Control 论文作者&#xff1a; Yide Shentu&#xff0c;Philipp Wu&#xff0c;Aravind Rajeswaran&#xff0c;Pieter Abbeel 项目地址&#xff1a; https://fredshentu.gith…

手把手!从头构建LLaMA3大模型(Python)

1. 前期准备 让我们先来想一想大概需要做什么。 首先是模型架构的选择。原工作用的是 GPT Neo 架构&#xff08;可以看他们的 config&#xff09;&#xff0c;这个算是很老的模型了&#xff0c;最初是 EleutherAI 用来复现追踪 GPT-3 的工作的&#xff0c;现在用的也比较少了…

JavaScript运行原理和执行过程

参考&#xff1a; https://www.cnblogs.com/hexrui/p/15939592.html 1、执行上下文栈&#xff08;调用栈&#xff09; GECGlobal Execution Context&#xff08;GEC&#xff09;被放入到ECS&#xff08;Execution Context Stack&#xff0c;简称ECS&#xff09;中 GEC开始执…

走嵌入式方向有必要参加数模的比赛,涨一下见识吗?

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

MYSQL 四、mysql进阶 3(存储引擎)

mysql中表使用了不同的存储引擎也就决定了我们底层文件系统中文件的相关物理结构。 为了管理方便&#xff0c;人们把连接管理、语法解析、查询优化这些并不涉及真实数据存储的功能划分为 Mysql Server的功能&#xff0c;把真实存取数据的功能划分为存储引擎的功能&…

【Unity】实现分屏开发

前言&#xff1a; 最近有个项目二期需要做分屏开发&#xff0c;今天恰好研究一下为后续的项目做个准备。 原理 整体的实现还是蛮简单的&#xff0c;主要是通过camera的一个targetDisplay属性进行设置 可以看到unity支持最多八个分屏 实现 场景搭建 &#xff0c;这里直接使…

Linux mongodb安装及简单使用

说明&#xff1a;本文章主要是对mongodb的单击安装 1.创建文件夹&#xff0c;准备安装包 cd /user/local mkdir tools 2.解压mongodb包 mkdir mongodb tar -xvf mongodb-linux-x86_64-rhel70-5.0.11.tgz -C mongodb 3.进入解压目录 cd mongodb cd mongodb-linux-x86_64-…

别再全网找了,这四款良心软件,还你一个清爽的电脑桌面

现在电脑桌面上软件多得吓人。 要是不整理&#xff0c;看着就闹心&#xff1b;整理起来呢&#xff0c;又累得够呛。 所以&#xff0c;很多人干脆就不用那些“用着没意思&#xff0c;删了又觉得可惜”的软件了。 但不管你怎么删&#xff0c;有些软件还是得留着&#xff0c;就像…

数据治理创新路:建设数据集市,强化数据报送一致性新实践

随着信息化和数字化的飞速发展&#xff0c;数据已经成为企业运营和决策的核心要素。然而&#xff0c;数据治理的复杂性和多样性给企业带来了不小的挑战。为了更好地应对这些挑战&#xff0c;许多企业开始探索数据治理的创新路径&#xff0c;其中建设数据集市和强化数据报送一致…

罗盘时钟屏保你见过吗?非常有特色的电脑时钟屏保

很多人都用过屏保&#xff0c;印象中系统自带的屏保&#xff0c;款式比较少&#xff0c;就那几款&#xff0c;在桌面飞来飞去的动画&#xff0c;基本都不怎么好看&#xff0c;特别有印象的就是那种泡泡屏保&#xff0c;这个算是比较美观的了。今天小编给大家介绍一款非常有特色…

正则表达式写起来不简单,但用起来真香

说在前面 &#x1f388;整理一些常见常用的正则表达式。 常见的正则表达式 1、手机号码 /^[1][3456789][0-9]{9}$/这个正则表达式 /^[1][3456789][0-9]{9}$/ 用于匹配中国的手机号码的一部分&#xff0c;但不包括全部有效的手机号码格式。下面是对它的详细解释&#xff1a; ^…

Linux 防火墙 Firewall 和 Iptables 的使用

如果我们在Linux服务器的某个端口上运行了个服务&#xff0c;需要外网能访问到&#xff0c;就必须通过防火墙将服务运行端口给开启。Linux中有两种防火墙软件&#xff0c;CentOS7.0以上使用的是firewall&#xff0c;CentOS7.0以下使用的是iptables&#xff08;使用较少且不建议…

React 通信:深层传递(Props、Context、Children Jsx)

在之前的文章 探讨&#xff1a;围绕 props 阐述 React 通信 中总结了关于“父子”组件传值&#xff0c;但是当需要在组件树中深层传递参数以及需要在组件间复用相同的参数时&#xff0c;传递 props 就会变得很麻烦。 实际案例&#xff1a; 下述展示有两种状态&#xff1a;① 详…

【BFS算法】广度搜索·由起点开始逐层向周围扩散求得最短路径(算法框架+题目)

0、前言 深度优先搜索是DFS&#xff08;Depth Frst Search)&#xff0c;其实就是前面所讲过的回溯算法&#xff0c;它的特点和它的名字一样&#xff0c;首先在一条路径上不断往下&#xff08;深度&#xff09;遍历&#xff0c;获得答案之后再返回&#xff0c;再继续往下遍历。…

python 【包含数据预处理】基于词频生成词云图

基于词频生成词云图 背景目的 有一篇中文文章&#xff0c;或者一本小说。想要根据词频来生成词云图。 为什么中文需要分词 中文分词是理解和处理中文文本的关键步骤&#xff0c;它直接影响到后续的文本分析和信息提取的准确性和有效性。 无明显单词分隔&#xff1a;中文文本不…

jumpserver堡垒机集群搭建

1、环境 操作系统&#xff1a;龙蜥os 7.9 firewall-cmd --permanent --zonepublic --remove-servicessh firewall-cmd --permanent --zonepublic --add-rich-rulerule familyipv4 source address10.90.101.1 port port22 protocoltcp accept firewall-cmd --reload2、安装NFS…

Blazor 中基于角色的授权

介绍 Blazor用于使用 .NET 代码库创建交互式客户端 Web UI。Microsoft 默认在 Blazor 应用程序中提供了一个用于身份验证和授权的身份框架。请注意&#xff0c;他们目前使用 MVC Core Razor 页面作为身份验证 UI。使用“Microsoft.AspNetCore.Identity.UI”包库来实现这一点。…

vue-cli 根据文字生成pdf格式文件 jsPDF

1.安装jspdf npm install jspdf --save 2.下载ttf格式文件 也可以用C:\Windows\Fonts下的字体文件&#xff0c;反正调一个需要的ttf字体文件就行&#xff0c;但有的字体存在部分字体乱码现象 微软雅黑ttf下载地址&#xff1a; FontsMarket.com - Download Microsoft YaHei …

2024zzb理论

1.下列图表中&#xff0c;能够识别异常值的是() 2.下列选项中&#xff0c;用于绘制单变量分布的函数是() 3.下列函数中&#xff0c;可以没置当前图形轴范围的是 4.下列函数中&#xff0c;可以为图表设置标题的是()。 5.下列pyplot模块的函数中&#xff0c;可以绘制散点图的是()…