经过上一篇文章的介绍，在 Umi 中如何添加全局布局文件，了解完了全局布局文件之后，这篇文章，我在给大家介绍下在 Umi 中如何实现路由跳转。

在 Umi 中如何实现路由跳转呢？在 Umi 中实现路由跳转和在 React Router 中和在 Dva 中是一样的，都是可以通过 link，都是可以通过代码来进行跳转的。

首先呢，不管三七二十一，先来给大家介绍下如何通过 link 来跳转。

找到全局布局文件找到 layouts 目录下的 index.tsx（js）文件，找到头部 div，在头部当中添加一些菜单，在菜单中添加一些 Link，通过 Link 来跳转就可以了，既然要使用 Link 首先我们就要导入 Link：

这个 Link 是从 umi 中导入的大家注意了，导入完之后改造头部 div 代码，我在头部当中呢，写上 Link 在 Link 中写上 index，通过 to 来告诉 Link 要跳转到哪里，当访问 

然后拷贝拷贝两个 Link，一个是 home，一个是 about：

<Link to="/home">Home</Link>
<Link to="/about">About</Link>

好，代码基本上是这样，重启项目 

，然后访问项目，发现头部多了三个菜单，点击菜单，发现可以跳转，这就是通过 Link 来实现的路由跳转。

关于 Link 的使用就是这样，那么接下来呢，我要给大家介绍下如何通过代码来实现路由跳转。

回到 Umi 的官方文档，文档地址呢在前几篇文档中已经给大家说明过了，找到『文档』，在『文档』中的左侧导航栏中找到『Umi 基础』，在『Umi 基础』中找到『页面跳转』：

点击一下页面跳转，进入到页面跳转的文档页面，官方告诉我们了如何通过 Link 来进行跳转，这个我们已经知道了，然后呢，官方告诉我们如何通过代码来进行页面跳转，通过代码，怎么通过？

根据观察官方文档发现，需要从 umi 中导入一个 history 对象，然后通过 history 对象的 push 方法来进行跳转，你 push 什么，umi 就跳转到什么，这样就可以了，这个 history 除了以导入的方式以外，是不是还可以直接从组件的 props 中获取到 history 对象，是不是两种方式都没有问题。

介绍完毕了就到了代码实操了，这个代码我写到哪里组件呢，我就找到了 pages 下的 index.js 在 index.js 中先导入 history：

history 是从 umi 中导入的大家注意了，然后找到 index.js 的组件内容部分添加按钮，首先是跳转到 Home 组件的按钮编写，编写一个 button，监听一下这个按钮的点击，当这个按钮被点击的时候，我就利用 history 的 push 方法来告诉 umi 我需要跳转到 home 这样呢就可以了代码如下：

<button onClick={() => history.push('/home')}>go to home</button>

，然后访问项目，点击按钮，发现可以跳转：

雀实可以跳转到 home，雀实没有问题，没有问题之后，在更改下 home 组件，在 home 组件中也可以添加一个按钮，返回上一页，监听一下返回按钮的按钮，我是不是说过要使用 history 除了可以导入以外，是不是还可以直接通过 props 获取 history 对象，所以在 home 组件中呢，我就写上 props.history，在 history 对象上有一个 goBack 方法，通过这个方法就可以返回上一页：

<button onClick={() => props.history.goBack()}>go back</button>

也就是这个 history 对象就是过去我介绍原生 JS 当中的 history，只不过这个 history 对象是 umi 封装的而已，然后呢，重启项目 

，然后访问项目，点击按钮，发现可以返回上一页：

这就是通过代码来实现路由跳转的方式。

本文主要介绍了在 Umi 中实现路由跳转的两种方式：

这两种方式都很实用，可以根据具体场景选择合适的跳转方式。Link 组件适合声明式的导航，而代码跳转则更适合在复杂业务逻辑中使用。

『Umi』实现路由跳转的两种方式

一、前言🐤本篇文章是『从零玩转 TypeScript + React 项目实战』系列文章的第 13 篇，《实现路由跳转的两种方式》经过上一篇文章的介绍，在 Umi 中如何添加全局布局文件，了解完了全局布局文件之后，这篇文章，我在给大家介绍下在 Umi 中如何实现路由跳转。二、路由跳转在 Umi 中如何实现路由跳转呢？在 Umi 中实现路由跳转和在 React Router 中和在 Dva 中是一

全栈开发者 / 技术博主

前端

本文介绍了在 Umi 中实现路由跳转的两种方式：通过 Link 组件跳转，适用于导航菜单等场景；通过代码方式跳转，使用 history.push() 和 history.goBack() 方法，适合在事件处理中进行编程式导航。

TypeScript

路由

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

『Umi』实现路由跳转的两种方式

『Umi』实现路由跳转的两种方式

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐