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
            },
        })
    }

3.接收值

console.info(this.props.location.query.title)
console.info(this.props.location.query.time)
console.info(this.props.location.query.text)

转载自:http://blog.csdn.net/sweiqin/article/details/60776603

时间: 2024-08-11 03:30:18

react-router跳转传值的相关文章

react router路由传参

今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-router V4的版本下. 1.通配符传参 Route定义方式: <Route path='/path/:name' component={Path}/> Link组件: <Link to="/path/通过通配符传参">通配符</Link> 参数获取: th

[转] React Router 使用教程

你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系.想要发挥它的威力,整个技术栈都要配合它改造.你要学习一整套解决方案,从后端到前端,都是全新的做法. 举例来说,React 不使用 HTML,而使用 JSX .它打算抛弃 DOM,要求开发者不要使用任何 DOM 方法.它甚至还抛弃了 SQL ,自己发明了一套查询语言 GraphQL .当然,这些你都可以不用,React 照样运行,但是就发挥不出它的最大威力. 这样说吧,你只要用了 React,就会发现合理的选择就是,采用它的整个技术栈.

React漫漫学习路之 React Router

React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步. 目前react-router最新版本已经到4.0+,因为新的版本是一次非常大的改动,所以这里直接讨论4.0以上版本. 引用 react-router // React Router 核心 react-router-dom // 用于 DOM 绑定的 React Router react-router-native // 用于 React Native

React Router简单Demo

简介 react router是使用react的时候首选的一个路由工具. 安装 react router包含react-router,react-router-dom和react-router-native这三个包,分别是路由核心组件和浏览器端组件和native端组件,所以我们需要安装react-router-dom npm install --save react-router-dom 安装后就可以直接使用了 https://codepen.io/pshrmn/pen/YZXZqM?edito

[Web 前端] React Router v4 入坑指南

cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好“尝尝鲜”... 江湖传言,目前官方同时维护 2.x 和 4.x 两个版本.(ヾ(??﹏?)??咦,此刻相信机智如我的你也会发现,ReactRouter v3 去哪儿了?整丢了??巴拉出锅了???敢不敢给我个完美的解释!?)事

react router 4.0以上的路由应用

thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr>td,.table>tbody>tr>th,.table>tbody>tr>td,.table>tfoot>tr>th,.table>tfoot>tr>td{padding:8px;line-height:1.4285714;ver

最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)

请表明转载链接:http://www.cnblogs.com/zhangkunweb/p/6853728.html 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊涂的reactjs ,我的天啊,不学会它,怎么能睡好觉. 今天我分享一个依赖最新版本的webpack + react + router + redux + scss + nodejs + mysql +

[React Router v4] Use the React Router v4 Link Component for Navigation Between Routes

If you’ve created several Routes within your application, you will also want to be able to navigate between them. React Router supplies a Link component that you will use to make this happen. Import Link: import { BrowserRouter as Router, Route, Link

[React Router V4] Create Basic Routes with the React Router v4 BrowserRouter

React Router 4 has several routers built in for different purposes. The primary one you will use for building web applications is the BrowserRouter. In this lesson you will import the BrowserRouter and create some basic Route components. After create