React路由跳转及路由传参

最新推荐文章于 2024-07-23 10:43:02 发布

King_960725

最新推荐文章于 2024-07-23 10:43:02 发布

阅读量522

点赞数

分类专栏： React React学习日志

本文链接：https://blog.csdn.net/weixin_42566993/article/details/100056147

版权

React学习日志同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

React

21 篇文章 0 订阅

订阅专栏

路由跳转

API跳转
this.props.history.push('/course')
NavLink
<NavLink to="/course"></NavLink>
Link
<Link to="/course"></Link>
a标签
<a href="#/course"></a>

路由传参

API传参

this.props.history.push({
    pathname: "/course",
    test: 'test',
    state: {name: 'tom'}
})
//获取
this.props.location.test
this.props.location.state

查询字符串传参

<NavLink to="/course?name=tom">NavLink跳转</NavLink>
//获取
this.props.location.search

动态路由传参

<Route path="/sc/:id" component={Course}></Route>
<NavLink to="/sc/2">NavLink跳转-动态路由</NavLink>
//获取
this.props.match.params.id

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

King_960725

关注关注

0
点赞
踩
2

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

React路由跳转及路由传参的几种方式

A20201130的博客

07-12

5051

原理：hash路由的原理是监听hashchange事件安装包 npm i react-router-dom@5.3.0 代码部分 Link 和 NavLink区别：NavLink指向的路径会自带一css类名swith：用Switch组件包裹多个组件。在组件下，不管有多少个Route的路由规则匹配成功，都只会渲染第一个匹配的组件404：不设置path属性，将404页对应的路由放在switch内部的最后位置三、编程式路由跳转传递参数组件里方法： let goNews = ()=>{

2021-05-31 react 路由跳转传参学习总结

qq_44999678的博客

05-31

674

react 路由跳转传参 路由传参学习总结对于react路由传参，有以下几种方式：问号传参(search传参)：问号传参属于明文传参。并且当刷新页面的时候参数不会消失。 <Link to={{ pathname:'/custom/info', search:'?id=' + value.id //基于问号传参 }}> 编号：{value.id}      姓名:{value.name}

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

react-router实现跳转传值的方法示例

12-03

前言本文主要给大家介绍了关于react-router跳转传值的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： react-router跳转传值 1.引入包 import {hashHistory} from ‘React-router' 2.跳转传值 handleClick = (value) => { hashHistory.push({ pathname: 'message/detailMessage', query: { title:value.title, time:value.time, text:value.text

react路由跳转传参

weixin_39818813的博客

07-18

1924

代码】react路由跳转传参。

react中路由跳转以及路由传参

最新发布

kanno的博客

07-23

1107

react中路由跳转以及路由传参

react中跳转传参

子玉的博客

01-14

1007

在Link组件中使用对象形式的to属性，例如：`详情页`。- 在Route组件中设置路径为`/detail/:id`，其中`:id`表示参数，可以通过this.props.match.params.id来获取参数的值。- 在Link组件中设置to属性为一个包含参数的URL路径，例如：`详情页`。

React 路由跳转传递参数问题

qq_46610638的博客

07-30

604

1.安装react-router-dom $ npm install --save react-router-dom 2.在App.js配置路由 import {BrowserRouter as Router,Switch,Route,Link} from "react-router-dom"; export default function App() { return ( <Router> <div> <Switch&gt

React跳转路由传参3种方法和区别

yidianyuanzhidong的博客

06-27

667

params传参特点：路由表配置：参数地址栏显示传入参数： <Link to="/home/001/zhangsan/18" /> 声明传参形式： <Router path="/home/:id/:name/:age" component={Home} />" 接收参数：在组件Home中接收使用this.props.match.params即可 query传参特点：query方法：参数地址栏不显示，刷新地址栏，参数丢失传入参数： <Link to="/home/

react hooks 路由传参 适合刚学习的你

weixin_45567934的博客

07-17

542

如果需要传递一个对象的话，可以将 json 对象转换为字符串，传递获取后再将 json 字符串转换为对象将数据取出来。这种方式参数数据不会显示在地址栏中，刷新也不会消失，如果失去登陆态导致重新登陆，state直接成为undefined。这种方式参数数据不会显示在地址栏中，刷新也不会消失，如果失去登陆态导致重新登陆，地址栏和search并不会丢失。地址栏表现为：/home/priceManagement/createCoupon/130。读取参数用:this.props.match.params.name。

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

02-12

### React Router 4.2 使用 JS 控制路由跳转的三种方式 #### 一、背景介绍随着前端技术的发展，单页应用(SPA)成为现代Web应用开发的标准模式之一。React作为当前流行的UI开发框架之一，由Facebook开源，被广泛...

React路由配置与跳转传值

sang_xu的博客

03-03

1639

React的路由跳转与传值

React路由跳转与传值

Forvever_的博客

06-29

524

路由控制跳转的组件中(一般是views目录下的页面组件),props会自动添加以下三个字段, (根组件和components中的组件没有路由信息)接收 {this.props.location.data && this.props.location.data.name}动态路由(友好url)传值跳转个人中心 react路由传值方式2: 动态路由(友好url)传值。

React路由跳转和传参

kuBi_MaNong的博客

02-24

1142

React路由的跳转-传参和收参 1. 安装react-router-dom npm install react-router-dom 2. 在项目中使用react-router-dom 首先在入口文件引入这个模块 // 这里有BrowserRouter (历史记录) 和 HashRouter(hash) 两种模式 import { BrowserRouter as Router} from...

react 基本路由跳转传参

weixin_44286765的博客

03-08

216

A页面 import React from ‘react’ import { BrowserRouter as Router, Switch, Route, Link } from ‘react-router-dom’ class Login extends React.Component { constructor(props) { super(props); this.state = { userName: ‘’, userPassword: ‘’ } } componentDidMount(){

react做路由跳转，路由传参