react-router传参

点击表单或按钮跳转

<form onSubmit={this.handleSubmit}>
  <input type="text" placeholder="userName"/>
  <input type="text" placeholder="repo"/>
  <button type="submit">Go</button>
</form>

第一种方法是使用browserHistory.push

import { browserHistory } from ‘react-router‘

// ...
  handleSubmit(event) {
    event.preventDefault()
    const userName = event.target.elements[0].value
    const repo = event.target.elements[1].value
    const path = `/repos/${userName}/${repo}`
    browserHistory.push(path)
  },

第二种方法是使用context对象

export default React.createClass({

  // ask for `router` from context
  contextTypes: {
    router: React.PropTypes.object
  },

  handleSubmit(event) {
    // ...
    this.context.router.push(path)   // 无参数
    this.context.router.push({pathname: path, state: {}})   // 有参数
  },
})

// 获取参数

componentDidMount() {
  this.setState({
     params: this.props.location.state.params
  })
}
时间: 2024-10-12 23:34:04

react-router传参的相关文章

react 路由传参

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

react路由传参

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

React路由安装使用和多种方式传参

安装路由 npm i react-router-dom -S 引入路由 import { BowserRouter as Router, Route, Switch, ... } from "react-router-dom" 整个项目顶层需要用<Router>包裹 并且 <Router>组件内只能有一个直接子级元素 例如: let App = props => (<Router> <div> <Route path=&quo

我的一个React路由嵌套(多级路由),路由传参之旅

在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的react已经配置了redux(见我的redux之旅),所以这是在引入的插件里做的演示. 从App组件跳转到NewRoute组件(需要简单的路由跳转,点击自己预习) (1)新建一个demo: 这里使用了render方式在一个文件中模拟了多个组件的效果 代码只为讲解使用在真实开发中尽量不要这样写代码的. 这

react如何优雅的绑定事件,并且可以优雅的传参

react函数调用以及传参. 一.先写不传参数的情况 1.es5写法 click(){ dosomething..... } 调用:onClick={this.click.bind(this)} 每次调用都需要传个this. 有的在constructor这样写 this.click = this.click.bind(this) 2.es6写法 click=()=>{ dosomething... } 调用:onClick={this.click},感觉很好 二.如果遇到传参就比较麻烦了 1.e

Vue用router.push(传参)跳转页面,参数改变,跳转页面数据不刷新的解决办法

vue-router同路由$router.push不跳转一个简单解决方案 vue-router跳转一般是这么写: goPage(ParentDeptCode2,DeptCode2,hosName,hosId){ this.$router.push({ path:'/ChoiceTime', query:{ DeptCode:ParentDeptCode2, DeptCode2:DeptCode2, hosName:hosName, hosId:hosId } })} 但是当遇到,需要跳转同页面不

react中的传参方式

react是一个SPA模式,即组件嵌套租,在一个单页面的应用中组件间的数值传递是必不可少的,主要的传参方式大致有一下几种: 1,在挂载的地方给组件传参 ReactDOM.rander(<a name='a' age={16}/>,app) 在渲染的时候,直接给挂载的组件传参. 2,父子传参 父子传参可以用props和ref两种方式,1,props方式传参,父组件通过改变自己的参数并且通过props将状态传递给子组件,并在子组件中显示.2,通过ref传参,这种方式是通过子组件自己的方法改变自己的

Vue-router的传参方式和router使用技巧

vue传参方法一 1,路由配置 { path: '/describe/:id', name: 'Describe', component: Describe } 2,使用方法 // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ // 这个id是一个变量,随便是什么值都可以 path: /describe/${id}`, }) 3,获取方法(在describe页面) $route.params.id 使用以上方法可以拿到上个页面传过来的id值 vue

React(7) --react父子组件传参

react父子组件传参 父级向子级传参:在父组件中,我们引入子组件,通过给子组件添加属性,来起到传参的作用,子组件可以通过props获取父组件传过来的参数. 在父组件中: import React from 'react' import ChildCom from './childCom.js' class ParentCom extends React.Component { render() { return ( <div> <h1>父组件</h1> <Chi