基于React路由跳转的几种方式

 更新时间:2022年07月29日 08:57:29   作者:小火车况且况且  
这篇文章主要介绍了React路由跳转的几种方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

React路由跳转的几种方式

注意: 这里使用的react-router-dom是版本5以上,路由形式是history模式

react-router-dom文档,其中依赖包history的github地址

1. params形式

路由跳转后,参数会显示在地址栏

在这里插入图片描述

跳转的方法是使用

history.push({pathname: '/personal', search: 'test=22222'})

其中search键对应的值就是拼接在地址栏的数据

import React from 'react'
import { useHistory } from 'react-router-dom'
export default ()=> {
	const history = useHistory()
	// 页面跳转方法
	history.push({pathname: '/personal', search: 'test=22222'})
	return 123
}

接收的方法。数据都是存储在useLocation中的search获取

import React from 'react'
import { useLocation } from 'react-router-dom'
export default ()=> {
	const location = useLocation()
	// 页面跳转方法
	console.log(location, 'props')
	return 123
}

在这里插入图片描述

2. 使用state的形式

页面刷新不会丢失数据,并且地址栏也看不到数据 跳转的方法是使用

history.push({pathname: '/personal', state: {test: 'dashboard'}})

其中search键对应的值就是拼接在地址栏的数据

import React from 'react'
import { useHistory } from 'react-router-dom'
export default ()=> {
	const history = useHistory()
	// 页面跳转方法
	history.push({pathname: '/personal', state: { test: 'dashboard' }})
	return 123
}

接收的方法。数据都是存储在useLocation中的search获取

import React from 'react'
import { useLocation } from 'react-router-dom'
export default ()=> {
	const location = useLocation()
	// 页面跳转方法
	console.log(location, 'props')
	return 123
}

在这里插入图片描述

React路由跳转传参问题

使用Link传参

1.引入Link

import { Link } from “react-router-dom”

2.Llink上携带传递的参数,携带的参数以对象形式

<Link to={
            { pathname: "/XXX", //xxx为跳转到的路径
              state: { title: this.state.exam.title, actionCode: this.state.exam.actionCode } 
            }
          } >切换考试科目 <i className="iconfont icon-jiantou"></i></Link>

2.1 接收参数(类组件)

componentDidMount() {
        console.log(this.props.location.state.XXX);   //xxx指state对象中的键名    
    }

2.2接收参数(函数式组件)

function Fast(props) {
     ...
    useEffect(() => {
        console.log(props.location.state.XXX);//xxx指state对象中的键名
    })
}

url传参

1.url带参传参

<button onClick={()=>{this.props.history.push('/detail/88')}}>跳往详情页</button>`

2.接收参数

//  react-router-dom是通过“/:”去匹配url传递的参数 ,即id获取到上面的url传过来的88
<Route exact path="/detail/:id" component={Detail}></Route>
//页面接收参数
componentDidMount(){
  console.log(this.props.match.params);
}

隐式传参

3.1 state方法

页面传参

state方法传参:参数地址栏不显示,刷新地址栏,参数不丢失

<button onClick={()=>{this.props.history.push({
    pathname: '/detail', //要跳转到的路径
    state: {  //参数地址栏不显示,刷新地址栏,参数不丢失
      id: 456
    }
  })}}>去详情页</button>

接收参数

<Route exact path="/detail" component={Detail}></Route>
//页面接收参数
componentDidMount(){
    console.log(this.props.history.location.state);
}

3.2 query方法

页面传参

query方法传参:参数地址栏不显示,刷新地址栏,参数丢失

<button onClick={()=>{this.props.history.push({
    pathname: '/detail', //要跳转到的路径
    query: {  
      id: 456
    }
  })}}>去详情页</button>

接收参数

<Route exact path="/detail" component={Detail}></Route>
//页面接收参数
componentDidMount(){
    console.log(this.props.history.location.query);
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • react入门级详细笔记

    react入门级详细笔记

    这篇文章讲述了React的基本介绍,基本使用和React相关js库.通过这篇文章可以入门React的使用,可以快速上手使用React进行代码的编写
    2021-06-06
  • 详解React 父组件和子组件的数据传输

    详解React 父组件和子组件的数据传输

    这篇文章主要介绍了React 父组件和子组件的数据传输的相关资料,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下
    2021-04-04
  • React中getDefaultProps的使用小结

    React中getDefaultProps的使用小结

    React中的getDefaultProps功能允许开发者为类组件定义默认属性,提高组件的灵活性和容错性,本文介绍了getDefaultProps的作用、语法以及最佳实践,并探讨了其他替代方案,如函数组件中的默认参数、高阶组件和ContextAPI等,理解这些概念有助于提升代码的可维护性和用户体验
    2024-09-09
  • react常见的ts类型实践解析

    react常见的ts类型实践解析

    这篇文章主要为大家介绍了react常见的ts类型实践解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • React 路由react-router-dom示例详解

    React 路由react-router-dom示例详解

    一个路由就是一个映射关系(key:value),key为路径, value可能是function或component,本文给大家介绍React 路由react-router-dom详解,感兴趣的朋友跟随小编一起看看吧
    2024-01-01
  • React函数式组件Hook中的useState函数的详细解析

    React函数式组件Hook中的useState函数的详细解析

    Hook 就是 JavaScript 函数,这个函数可以帮助你钩入(hook into) React State以及生命周期等特性,这篇文章主要介绍了React Hook useState函数的详细解析的相关资料,需要的朋友可以参考下
    2022-10-10
  • React子组件调用父组件的方法

    React子组件调用父组件的方法

    本文主要介绍了React子组件调用父组件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-08-08
  • React Native自定义标题栏组件的实现方法

    React Native自定义标题栏组件的实现方法

    今天讲一下如何实现自定义标题栏组件,我们都知道RN有一个优点就是可以组件化,在需要使用该组件的地方直接引用并传递一些参数就可以了,这种方式确实提高了开发效率。对React Native自定义标题栏组件的实现方法感兴趣的朋友参考下
    2017-01-01
  • React使用Context与router实现权限路由详细介绍

    React使用Context与router实现权限路由详细介绍

    这篇文章主要介绍了React使用Context与router实现权限路由的详细过程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-01-01
  • 详解如何在React函数式组件中使用MobX

    详解如何在React函数式组件中使用MobX

    MobX 是一个简洁的状态管理库,它通过透明的函数响应式编程(TFRP)使得状态管理变得简单和可扩展,下面就跟随小编一起来了解一下如何在React函数式组件中使用MobX吧
    2024-01-01

最新评论