ReactJS与antdDesign中页面跳转问题（React Router）

最新推荐文章于 2025-04-02 20:35:55 发布

「已注销」

最新推荐文章于 2025-04-02 20:35:55 发布

阅读量9k

点赞数

分类专栏： React 文章标签： path 导航标签 javascript menu

本文链接：https://blog.youkuaiyun.com/Wu_shuxuan/article/details/78772378

版权

React 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用React Router结合Menu组件实现页面内容的动态切换。首先安装React Router，然后在Menu组件中为每个菜单项绑定路径，并在Content区域设置对应的Route组件。注意将Menu和Route包裹在<Router>标签内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过侧边栏导航Menu的Menu.Item控制Content部分内容的变化。

先安装React Router
```
npm install react-router --save-dev
```
在js中引用

这里写图片描述

链接Menu与Router
```
1. Menu中利用link绑定path
```

这里写图片描述

2.在content模块中设置Route

这里写图片描述

注意：

1. <Router></Router> 标签要把Menu和Route组给一起包起来；

2. 一个path对应一个component；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

React导航栏效果（antd+react router4.0）

zfan520的博客

12-14

1万+

1、演示效果最上面的部分为导航插件。 2、具体代码与介绍 2.1 Reactjs首次加载与路由页面 index.js首次加载 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import RouterIndex from './routers/inde

React + antd + ts 商城demo

qt的博客

02-26

2032

目的：实现一个react的商城demo，实现含有购物车，登录，注册，商城等功能使用到的技术栈：脚本：TypeScript 前端框架：React 路由管理：React-router-dom 用户界面：Antd 全局状态管理：Redux 异步状态更新：redux-saga 路由状态同步：connected-react-router 网络请求：Axios 调试工具：redux-devtools-extension 服务端：脚本：Node.js 数据库：Mongodb 数据库可视化：Robo 3T 搭

1 条评论您还未登录，请先登录后发表或查看评论

React Native+react-navigation+antd Mobile(加载环境)一个简单的页面跳转demo

07-18

这个只是一个简单的页面跳转，但是前期配置环境配置了一周，还是发上来留个纪念哈哈

Ant Design+react 路由跳转

weixin_56848461的博客

10-10

851

之后就是App.js页面了，我的layout是写在app.js里的，所以要在app.js进行设置。最后，在使用路由懒加载的同时，一定要记得使用<Suspense>嵌套，否则还是会报错，切记切记。到这里还有最重要的一步，因为我们这是的路由懒加载，这个时候跳转是会报错的。找不到路径名，那就是没有找到地址于是我把<router>的时候就出现这个问题，那么问题估计出现在<router>一直出现不能读到pathname，从<router>首先，创建router文件夹中的index。

项目实战--登录页面

最新发布

chestnut_orenge的博客

04-02

379

接下来写登录页面把登录页面和导航栏什么的同步写一写。

react+redux+antD Menu组件实现页面路由跳转

qq_40713419的博客

06-04

1102

解决思路：1 Menu组件的selectedKeys属性指向当前选中的items项，应使用变量控制其显示，需要注意，这个变量需要与items项数组中的key值保持一致，否则Menu组件的选中效果将会消失。3 redux和localStorage配合使用，redux作为全局可改变与监听到的数据，localStorage存储当前页面的状态。2 页面的导航栏和侧边栏使用一个Frame组件，组件使用antD的Layout布局。需要存储当前页面路径的状态以及将左侧导航栏的选中状态与当前页面的路径保持一致。

Ant Design of React组件引用及路由跳转

键指江湖的博客

10-09

1057

注意如果要使用Ant 的图标，需要另外引入，从 4.0 开始，antd 不再内置 Icon 组件，需使用独立的包 @ant-design/icons。这里我们主要2点：1.使用Ant的组件；2，如何引用页面组件；Ant Design of React组件引用及路由跳转，接着笔记(1)继续。公共组件目录定义了公共组件header，和底部公共组件footer。安装成功，在home.tsx文件引用。二，页面组件的引用及导航路由跳转。一，Ant组件的引用。

react antd 路由跳转、带参数的路由跳转

倚树探星的博客

06-17

4228

1、路由跳转需要先进行引入： import { Link } from "umi" 如何写路由跳转： <Link to="/agricultureSchool/addVideo"><PlusOutlined />新建</Link> 2、带参数的路由跳转 umi 官方说明：https://umijs.org/api#plugin 实例代码： import { history } from "umi" export default class Agricultu

react-antd-admin-master.zip

07-19

在本项目中，React Router被用来管理不同的页面和路由，实现页面间的跳转和导航。通过配置路由规则，系统可以根据URL的变化加载相应的组件，使得用户可以在不刷新整个页面的情况下切换视图，提升了用户体验。 Redux...

基于React与Ant Design的通用后台管理系统模板

2. "react-router"：这是 React.js 的一个官方路由管理库，它允许用户在单页面应用中根据地址的变化渲染不同的组件，而且可以与 React.js 的生命周期方法协同工作。 3. "react-admin"：这可能指的是一种使用 React ...

react + react-router 实现 header 组件登录退出功能

weixin_46317050的博客

08-10

1244

这里是以简书的头部组件为例，这里使用了 styled-components 来编写样式，需要安装 styled-components npm i styled-components --save header.js import React from 'react' import {Link} from 'react-router-dom' import {connect} from 'react-redux' import {GlobalStyle} from './../../statics/ico

antd页面内的导航跳转

weixin_45869418的博客

08-05

2718

1.在route.js配置相应导航点击后的跳转路径及资源，部分关键配置如下： routes: [ // dashboard { path: '/', redirect: '/user/login' }, //系统设置 { path: '/setting/account', name: 'setting', component: './Setting/personal', routes: [

ant design 路由跳转

qq_37869178的博客

03-04

1266

<a-menu-item @click="person"> <a-icon type="user" /> <span>个人中心</span> </a-menu-item> export default { methods: { person() { this.$router.push('/form/basic') } } }

antd点击跳转页面且有参数_【第1569期】配置化页面渲染系统设计和实践

weixin_42097533的博客

12-28

332

前言今日早读文章由@小问授权分享。@小问,多领域开发者，主要为 Web 开发、大数据与机器学习领域。目前在七牛云负责平台产品的策划和架构、算法研发，做过一些数据相关的开源项目，如 iwillwen/mindb。多次以讲师身份参加国内外多个 Web 领域开发大会，如 JSConf China，并著有《实战 ES2015：深入现代 JavaScript 应用开发》、《基于 JavaScrip...

antd 页面跳转_在React中使用react-router-dom路由

weixin_39847099的博客

12-23

1108

在React中使用react-router-dom路由使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。安装首先进入项目目录，使用npm安装react-router-dom：npm install rea...

vue外卖四：抽取公共组件TopHeader——slot的使用、父传子值

11-07

503

一、抽取公共组件TopHeader.vue 1.从Msite.vue抽取头部标题到src/components/TopHeader/TopHeader.vue 知识点1. 子组件接收父组件传值模板内留下接收位置：  <span class="header_title_text ellipsis">{{title}}</span> script设置接收值的类型，注意首字母大写 //2.接收父组件传的值为title,

Vue 页面跳转与参数传递

山水一程

03-31

2321

标签跳转 1、不带参数跳转 <router-link to="/about"> <button>跳转到关于我们</button> </router-link> <router-link :to="{path: '/about'}"> <button>跳转到关于我们</button> </router-...

【Ant.design Pro】跳转网址界面${传参数}

itxnk的博客

12-10

387

queryParams就是接受的参数。formRef将他传给Form组件里。

antd 实现跳转

金溪的博客

08-14

4957

使用<Link />标签 1. 导入umi组件 import Link from 'umi/link'; 2. 页面使用<Link />标签 <Link to="/dashboard/analysis?id=1&name=admin"><Button icon="plus"><FormattedMessage id='glo...