React 跳转页面 传递传递参数,并获取参数

简介: React 跳转页面 传递传递参数,并获取参数

1.第一种是类似于a标签跳转

import {Link} from 'react-router-dom'
<Link to="/Aboutus">
   <button> 关于我们 </button>
</Link>

2.第二种是跳转页面并传递参数

this.props.history.push("/detail", {
dotData: record
});

3.第三种是在detail页面回去参数

const messages = this.props.location.state.dotData

clicked = (param) => {
        this.props.history.push("/Index", {
            dotData: this.name
        });
    }
<button value="按钮" onClick={this.clicked}>点击</button>
目录
相关文章
|
4月前
|
存储 前端开发 JavaScript
react怎么实现跨页面传参
react怎么实现跨页面传参
144 2
|
4月前
|
资源调度 JavaScript 前端开发
React-Router 5.0 制作导航栏+页面参数传递
React-Router 5.0 制作导航栏+页面参数传递
39 0
|
4月前
|
数据采集 资源调度 前端开发
React的服务器端渲染:使用ReactDOMServer进行高效页面预渲染
【4月更文挑战第25天】使用ReactDOMServer,React支持服务器端渲染以实现高效预渲染。通过在Node.js环境中将React组件转化为HTML字符串,减少客户端JavaScript负载和渲染时间。优点包括更快首屏加载、改善SEO和兼容无JavaScript环境,但也会增加服务器负载、复杂性和状态管理挑战。开发者需根据项目需求平衡SSR和CSR。
|
4月前
|
前端开发
探索React页面导航:不只有React Router
探索React页面导航:不只有React Router
|
4月前
|
JavaScript 前端开发 小程序
react-router4.2使用js控制路由跳转的3种方式
react-router4.2使用js控制路由跳转的3种方式
|
4月前
|
前端开发
react跳转传参方式
react跳转传参方式
34 0
|
4月前
|
JavaScript 前端开发
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)...
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)...
72 0
|
4月前
|
JavaScript 前端开发
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)
49 0
|
9月前
|
前端开发
写一个react 的页面 录像组件
写一个react 的页面 录像组件
41 0
|
9月前
|
前端开发 CDN
在单html页面中使用react并配置jsx
在单html页面中使用react并配置jsx
40 0