react-router 4.2.0<link>页面跳转-传参与不传参

最新推荐文章于 2023-04-24 11:00:50 发布

置顶

只如初见0706

最新推荐文章于 2023-04-24 11:00:50 发布

阅读量1.7k

点赞数

分类专栏： react 文章标签： react-router 4.x react-router 4.2.0 link跳转 link跳转传参 react-router 4.x lin

本文链接：https://blog.csdn.net/zrcj0706/article/details/78577328

版权

本文详细介绍了如何在react-router 4.2.0中使用<link>进行页面跳转，分为传参和不传参两种情况。在不传参的情况下，通过定义route和设置导航跳转实现页面切换。当需要传参时，除了定义route和导航跳转，还展示了如何在目标页面获取并解析参数。

摘要由CSDN通过智能技术生成

1.不传参

第一步：定义route

import Login_Index from '../components/Login_Index.js';//引入页面
<Route path="/Login_Index " component={Login_Index }/> //path:单纯路径

第二步：导航跳转设置：单击“登录”按钮跳转到登录主页

<Link to="/Login_Index "> <Button >登录</Button> </Link>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

只如初见0706

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue使用router-link跳转页面，链接改变，获取url参数未变

坚果程序开发存档博客专栏

08-10

1084

vue使用router-link跳转页面，链接从A页面跳转到B页面，再由B页面返回到A页面，A页面再调整到B页面,B 页面获取到的url参数确未改变的解决办法。 home页面： <router-link :to="{path: 'detail', query: { userid: 2 }}">详情页</router-link> detail页面：地址示列：http://localhost:9527/#/detail?userid=2 created() {..

link传参方式总结，React+TS

qq_54896312的博客

07-26

2323

react router路由传参三种方式：通过通配符传参、query传参、state传参。优点:简单快捷，在刷新页面的时候，参数不会丢失。缺点:只能传字符串，传的值太多的话，url会变得长而丑陋。如果想传对象的话，可以用JSON.stringify(),想将其转为字符串，然后另外的页面接收后，用JSON.parse()转回去。...

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

react-router4.2使用js控制路由跳转的3种方式

02-12

react技术是目前流行UI开发框架，是facebook的开源的开发技术

react中实现点击跳转到新页面方法

weixin_30673611的博客

11-25

1万+

实现点击跳转到新页面，可以有两种形式，一个是本地页面打开，一个是本地页面不变跳转到新的页面。（一）页面点击本地页面打开新页面引入ant的Button组件 <Button style={{backgroundColor:'#F0F2F5'}} onClick={()=>{window.location.href="https://baidu.com"}} className...

[react] 如果组件的属性没有传值，那么它的默认值是什么？

歌谣的博客

11-16

505

[react] 如果组件的属性没有传值，那么它的默认值是什么？如果某一个prop并没有初始化值，那么在没有设置默认值的情况下，是会直接返回undefined的，如果有默认值，那么就会返回默认值个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题 ...

react-router-dom ＜NavLink＞ v6用法

weixin_45388599的博客

01-08

1993

react-router 的<NavLink>组件： A <NavLink> is a special kind of that knows whether or not it is “active”. 在V6 版本中activeClassName 和activeStyle 已经从NavLinkProps中移除，可以直接在<NavLink>的className和style中使用一个函数来使用active。 className的用法： V5： <NavLink

React-router路由跳转及传参

明知山

06-15

609

标签跳转及传参 import { Link } from "react-router-dom"; 动态路由传参 <Link to={`/detail/123`}>跳转到详情</Link> path: "/detail/:id" console.log(this.props.match.params.id) get传参 <Link to={`/detail_t?id=123`}>跳转到详情</Link> console.log(this.props.

详解关于React-Router4.0跳转不置顶解决方案

10-17

然而，在使用React-Router 4.0版本时，可能会遇到一个问题，即在页面跳转后，浏览器的滚动位置没有重置，导致用户从一个页面跳转到另一个页面时，上一个页面的滚动状态被保留下来。这显然不符合大多数用户的浏览预期...

react router路由跳转传参，react-router-dom基本使用+4种传参方式

程序员良仔

04-18

7150

前言目录前言一、使用场景二、使用方法三、总结一、使用场景二、使用方法三、总结你可能感兴趣的文章： vue中组件间通讯的8种方法

关于react-router/react-router-dom v4 history不能访问问题的解决

11-28

在本文中，我们将深入探讨一个关于`react-router-dom` v4版本中的`history`对象无法访问的问题及其解决方案。在升级到`react-router-dom` v4后，开发者可能会遇到在子组件中通过`this.props.history`无法获取到`...

react 路由Link配置

weixin_43294560的博客

02-25

9936

1、Link的to属性 (1)放置路由路径 (2)放置对象,且为规定格式 {pathname:"/xx",search:'?键值对',hash:"#xxx",state:{键值对}} 会自动将pathname、search、hash拼接在url路径上,state为传入的参数可通过输出props查看对象内的信息 2、Link的replace属性添加replac...

react路由配置,路由跳转与传值,路由监听

wlt_5079的博客

06-21

5132

1.react路由配置 2.react路由跳转和传值 3.react路由监听

react router路由传参三种方式

jiao512的专栏

10-23

6277

react router路由传参三种方式：通过通配符传参、query传参和state传参。 1.通配符传参 Route定义方式： <Route path='/path/:name' component={Path}/> Link组件： <Link to="/path/通过通配符传参">通配符</Link> 参数获取： this.props.match.par...

router-link传参及参数的使用

a3060858469的博客

06-02

2994

1.路径：http://localhost:8081/#/test?name=1 &lt;router-link:to="{path:'/test',query:{name:id}}"&gt;跳转&lt;/router-link&gt; id是参数使用this.$route.query.id 2.路径：http://localhost:8081/#/test/1 &lt;rout

通过react-router的Link进行页面跳转并传值的方法

12-19

2113

使用React router定义路由时，我们可以给指定一个path，然后指定通配符可以携带参数到指定的path：首先定义路由: import { HashRouter,Route} from 'react-router-dom'; class App extends React.Component { render() { return ( <HashRout...

react-breadcrumbs:React-Router的自动面包屑

05-02

注意：此版本仅与React-Router v4及更高版本兼容。如果您需要与React-Router v3及更低版本兼容的版本，请使用 npm install --save react-breadcrumbs@1.6.x 演示版 /demo目录提供了如何使用此软件包的一个示例。 ...

如何使用router-link对象方式传递参数？