iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >react-router-dom路由跳转怎么实现
  • 258
分享到

react-router-dom路由跳转怎么实现

React 2023-05-14 21:05:54 258人浏览 薄情痞子
摘要

本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。react-router-dom路由跳转怎么实现?React-Router-dom路由跳转useNavigateuseNavigate方法可以手动操作进行

react-router-dom路由跳转怎么实现

教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。

react-router-dom路由跳转怎么实现?

React-Router-dom路由跳转

useNavigate

useNavigate方法可以手动操作进行路由跳转,可以在不同页面之间切换

import { FunctionComponent } from "react";
import { useNavigate } from "react-router-dom";
import { Button } from "antd";
export const Login: FunctionComponent = () => {
  const navigate = useNavigate();
  const login = () => {
    navigate("/"); // 向 navigate 方法中传入要跳转的 path 路径
  };
  return (
    <div>
      Login
      <Button type="primary" onClick={login}>
        登录
      </Button>
    </div>
  );
};
attribute描述
replace路由历史,当值为 true 时,不创建历史条目
state路由传值,传params参数

在 CodeSandBox 上尝试

replace属性默认值为false,使用{replace:true}这样我们就不会创建登录页面历史堆栈中的另一个条目。这意味着当他们到达受保护的页面并单击“上一步”按钮时不会回到登录页面

state属性进行路由传值,以params参数的形式传递,不会显示在url后方,页面刷新参数会丢失。在其他页面我们是用 useLocation 方法获取参数

以上就是react-router-dom路由跳转怎么实现的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: react-router-dom路由跳转怎么实现

本文链接: https://www.lsjlt.com/news/206240.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • react-router-dom路由跳转怎么实现
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react-router-dom路由跳转怎么实现?React-Router-dom路由跳转useNavigateuseNavigate方法可以手动操作进行...
    99+
    2023-05-14
    React
  • react-router-dom路由跳转如何实现
    这篇“react-router-dom路由跳转如何实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“react-router...
    99+
    2023-07-04
  • react native路由跳转怎么实现
    本教程操作环境:Windows10系统、React Native0.67版、Dell G3电脑。react native路由跳转怎么实现?React Native-路由跳转搭建完RN开发环境后,要实现多个页面之间的跳转。 1.这时需要安装r...
    99+
    2023-05-14
    react-native
  • react 4.0 路由怎么跳转
    本教程操作环境:Windows10系统、React-Router v4.0版、Dell G3电脑。react 4.0 路由怎么跳转?React-Router v4.0 hashRouter使用js跳转React-Router v4.0上已经...
    99+
    2023-05-14
    react-router
  • react native路由跳转如何实现
    这篇文章主要讲解了“react native路由跳转如何实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react native路由跳转如何实现”吧!react native路由跳转的实现...
    99+
    2023-07-04
  • vue3中怎么使用router路由实现跳转传参
    本文小编为大家详细介绍“vue3中怎么使用router路由实现跳转传参”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue3中怎么使用router路由实现跳转传参”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一...
    99+
    2023-07-06
  • React组件通信之路由传参(react-router-dom)
    目录  最近在学习react,现在的工作中使用的是vue,在学习的过程中对两者进行比较,加深理解。   以下是react中的一小部分知识点,我个人觉得也是比较常用...
    99+
    2024-04-02
  • 关于react-router-dom路由入门教程
    目录react-router-dom路由安装下面是使用js的方法进行跳转的方式url参数的获取总结react-router-dom路由 react的路由和vue个人感觉有很大的不同,...
    99+
    2023-03-24
    react-router-dom react-router-dom路由
  • vue如何使用router-link实现路由跳转
    这篇文章主要介绍vue如何使用router-link实现路由跳转,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!router-link 【实现跳转最简单的方法】<router-link to='...
    99+
    2023-06-18
  • react-router-dom路由入门实例代码分析
    这篇文章主要介绍了react-router-dom路由入门实例代码分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react-router-dom路由入门实例代码分析文章都会有所收获,下面我们一起来看看吧。r...
    99+
    2023-07-05
  • springMVC路由跳转怎么实现
    本篇内容介绍了“springMVC路由跳转怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!实现目标:使用springMVC前端控制器,...
    99+
    2023-06-30
  • Flutter的路由router-页面跳转
    文章目录 概念介绍基本路由(Basic Routing)跳转到某个页面弹出页面 命名路由(Named Routing)第三方路由管理库(Third-Party Routing Libr...
    99+
    2023-09-20
    flutter 路由 router 页面跳转 intent
  • react中路由跳转及传参的实现
    目录1.useNavigate2.useLocation3.示例1.useNavigate useNavigate 是 React Router v6 中新增的一个 hoo...
    99+
    2023-05-19
    react 路由跳转 react 路由传参
  • vue-router路由跳转问题replace
    目录vue-router路由跳转replacevue router路由跳转方法概述一、概述二、跳转方法三、路由中params和query的区别vue-router路由跳转replac...
    99+
    2024-04-02
  • react如何实现路由跳转前确认
    这篇文章主要介绍“react如何实现路由跳转前确认”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react如何实现路由跳转前确认”文章能帮助大家解决问题。react实现路由跳转前确认功能的方法:1、...
    99+
    2023-07-05
  • 路由react-router-dom的基本使用教程
    目录react-router-dom路由简介react-router-dom路由的基本使用设置默认路由常用组件介绍Router组件路由的执行过程编程式导航匹配模式模糊匹配-默认rea...
    99+
    2023-02-02
    路由react-router-dom的使用 路由react-router-dom react-router-dom使用
  • vue router路由跳转方法是什么
    本文小编为大家详细介绍“vue router路由跳转方法是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue router路由跳转方法是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。通过router-...
    99+
    2023-07-06
  • vue 路由视图 router-view嵌套跳转的实现
    目录1、修改app.vue页面2、创建登录页面(/views/login/login.vue)2.1、在router/index.js中添加登录页面路由3、创建主页面(/compon...
    99+
    2024-04-02
  • react-router-dom之异步加载路由方式
    目录react-router-dom异步加载路由安装依赖react-loadablereact路由组件异步加载,优化白屏总结react-router-dom异步加载路由 这篇文章跟h...
    99+
    2023-03-24
    react-router-dom 异步加载路由 路由react-router-dom
  • vue3配置router路由并实现页面跳转功能
    目录1、安装vue-router2、根目录下新建router文件夹,下面新建index.js文件和routes.js2.1文件中引入vue方法、配置页面具体路径3、main.js文件...
    99+
    2023-05-17
    vue3页面跳转 vue3配置router路由
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作