• 的基础请参考阮老师的博客注:本文示例React Router版本为:3.0.2,使用前请注意检查版本一.props.params官方例子使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: ...

    本文主要介绍React Router定义路由之后如何传值,有关React和React Router
    的基础请参考阮老师的博客

    注:本文示例React Router版本为:3.0.2,使用前请注意检查版本

    一.props.params

    官方例子使用React router定义路由时,我们可以给<Route>指定一个path,然后指定通配符可以携带参数到指定的path:
    首先定义路由到UserPage页面:

    import { Router,Route,hashHistory} from 'react-router';
    class App extends React.Component {
      render() {
        return (
            <Router history={hashHistory}>
                <Route path='/user/:name' component={UserPage}></Route>
            </Router>
        )
      }
    }

    上面指定参数一个参数name
    使用:

    import {Link,hashHistory} from 'react-router';

    1.Link组件实现跳转:

    <Link to="/user/sam">用户</Link>

    2.history跳转:

    hashHistory.push("/user/sam");

    当页面跳转到UserPage页面之后,取出传过来的值:

    export default class UserPage extends React.Component{
        constructor(props){
            super(props);
        }
        render(){
            return(<div>this.props.params.name</div>)
        }
    }

    上面的方法可以传递一个或多个值,但是每个值的类型都是字符串,没法传递一个对象,如果传递的话可以将json对象转换为字符串,然后传递过去,传递过去之后再将json字符串转换为对象将数据取出来
    如:定义路由:

    <Route path='/user/:data' component={UserPage}></Route>

    使用:

    var data = {id:3,name:sam,age:36};
    data = JSON.stringify(data);
    var path = `/user/${data}`;
    1.<Link to={path}>用户</Link>
    2.hashHistory.push(path);

    获取数据:

    var data = JSON.parse(this.props.params.data);
    var {id,name,age} = data;

    通过这种方式跳转到UserPage页面时只能通过传递字符串来传递参数,那么是否有其他方法来优雅地直接传递对象而不仅仅是字符串呢?

    二.query

    query方式使用很简单,类似于表单中的get方法,传递参数为明文:
    首先定义路由:

    <Route path='/user' component={UserPage}></Route>

    使用:

    var data = {id:3,name:sam,age:36};
    var path = {
      pathname:'/user',
      query:data,
    }
    1.<Link to={path}>用户</Link>
    2.hashHistory.push(path);

    获取数据:

    var data = this.props.location.query;
    var {id,name,age} = data;

    query方式可以传递任意类型的值,但是页面的URL也是由query的值拼接的,URL很长,那么有没有办法类似于表单post方式传递数据使得传递的数据不以明文传输呢?

    三.state

    state方式类似于post方式,使用方式和query类似,
    首先定义路由:

    <Route path='/user' component={UserPage}></Route>

    使用:

    var data = {id:3,name:sam,age:36};
    var path = {
      pathname:'/user',
      state:data,
    }
    1.<Link to={path}>用户</Link>
    2.hashHistory.push(path);

    获取数据:

    var data = this.props.location.state;
    var {id,name,age} = data;

    state方式依然可以传递任意类型的数据,而且可以不以明文方式传输。

    可以在实现后对比地址栏的URL来观察三种传值方式URL的区别

    展开全文
  • react 路由获取参数

    2019-07-11 03:32:31
    在简书页面中Home页面有详情页在组件List中如下图: 代码如下: {list.map((item,index) =>{ return ( <Link to={'/detail/'+item.get('id')} key = {index}> <ListItem >...img cl...

    在简书页面中Home页面有详情页在组件List中如下图:

    代码如下:

    {list.map((item,index) =>{
    return (
    <Link to={'/detail/'+item.get('id')} key = {index}>
    <ListItem >
    <img className='pic' src={item.get('imgUrl')} alt=""/>
    <ListInfo>
    <h3 className='title'>{item.get('title')}</h3>
    <p className='desc'>{item.get('desc')}</p>
    </ListInfo>
    </ListItem>
    </Link>


    )
    })}


    这里向路由传递参数
    <Link to={'/detail/'+item.get('id')} key = {index}>
    这样点击详情页不会显示页面内容需要在App.js中修改如下图:

    代码如下:<Route path = '/detail/:id' exact component={Detail}></Route>

    在detail页面中获取传来的id入下图所示:

    在mapDispatch方法中定义一个获取详情页的方法,在方法中定义的actionCreaters定义一个ajax的方法的action并发送到store中,由详情页的reducer处理,如下图所示aciotnCreaters.getDetail()方法:

    因为页面引入redux-thunk,因此action可以是一个方法而不是对象,changeDetail方法创建action传递title和content参数。在detail的reducer中执行相应的代码如下所示:

     

     

     

     

    转载于:https://www.cnblogs.com/zhx119/p/10867911.html

    展开全文
  • React 路由参数传递

    2019-04-07 21:32:17
    React路由可以处理明确的url,也可以动态的去匹配 url中的参数路径。 传参方式有三种: 方式一: 通过params 1.路由表中 <Routepath=' /sort/:id ' component={Sort}></Route>  2.L...

    React路由可以处理明确的url,也可以动态的去匹配 url中的参数路径。

    传参方式有三种:

    方式一:

             通过params

            1.路由表中      

                  <Route path=' /sort/:id '   component={Sort}></Route>           

            2.Link处        

                HTML方式

                     <Link to={ ' /sort/ ' + ' 2 ' }  activeClassName='active'>XXXX</Link>     

                   动态路由匹配方式:

                    <Link to={ ' /sort/:id' }  activeClassName='active'>XXXX</Link> 

                    //以 :id  的方式来动态的匹配参数路由。

              JS方式

                    this.props.history.push(  '/sort/'+'2'  )           

            3.sort页面       

                   通过  this.props.metch.params.id        就可以接受到传递过来的参数(id)   

    优势 : 刷新地址栏,参数依然存在
    缺点:只能传字符串,并且,如果传的值太多的话,url会变得长而丑陋。        

       方式 二

             通过query

                    前提:必须由其他页面跳过来,参数才会被传递过来

            注:不需要配置路由表。路由表中的内容照常:<Route path='/sort' component={Sort}></Route>

            1.Link处      

             HTML方式

                <Link to={{ path : ' /sort ' , query : { name : 'sunny' }}}>

           JS方式

                this.props.history.push({ path : '/sort' ,query : { name: ' sunny'} })

            2.sort页面     

                  this.props.location.query.name            

    优势:传参优雅,传递参数可传对象;
    缺点:刷新地址栏,参数丢失                    

         方式 三

            通过state

                同query差不多,只是属性不一样,而且state传的参数是加密的,query传的参数是公开的,在地址栏

            1.Link 处      

              HTML方式:

                    <Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}>                                   

             JS方式:

                this.props.history.push({ pathname:'/sort',state:{name : 'sunny' } })                                  

            2.sort页面       

                this.props.location.state.name

    优缺点同query

    展开全文
  • 最近写的项目遇到遇到关于react路由的问题,原项目中,查找的时候获取文本框上的值并跳转到查找结果页面,在componentDidMount函数中获取路由上的关键字,向其他组件传递参数keywords,向后台查询结果并返回。...

    最近写的项目遇到遇到关于react路由的问题,原项目中,查找的时候获取文本框上的值并跳转到查找结果页面,在componentDidMount函数中获取路由上的关键字,向其他组件传递参数keywords,向后台查询结果并返回。在重新查询的过程中,发现虽然路由上的参数已经改变,然而页面上的查找结果并没有更新。

    原代码:

    //定义变量
    state={
         key:""
    }
    
    //获取值
    componentDidMount(){
            let key = this.props.match.params.key;
            this.setState({
                key:key
          })
    }
    
    //传递参数
     <Article keywords={`${this.state.key}`}/>

    随后排查后发现页面获取key时是在componentDidMount中获取的,而componentDidMount只在第一次渲染后调用,因此虽然路由改变了但是并没有再次调用函数,具体Recat的生命周期可参考http://www.runoob.com/react/react-component-life-cycle.html

    因此在参数改变的时候,可以利用componentWillReceiveProps来更新变量

    //组件更新时被调用 
    componentWillReceiveProps(nextProps){
            let key = nextProps.match.params.key;
            this.setState({
                key:key
            })
    }

    注意:像Article中也同样需要加入componentWillReceiveProps函数,加入后即可正常刷新页面。

     

    ps:如有更好的解决方法,欢迎交流

    转载于:https://www.cnblogs.com/GEWUYE/p/8877187.html

    展开全文
  • 路由参数 假如我们有很多 list 页面,这些页面除了动态内容不同,其他的页面部分都相同,这个时候需要怎么配置路由和组件呢? 这种场景就需要用到路由的参数功能,增加一条包含参数的路由配置。 import List from...

    路由参数
    假如我们有很多 list 页面,这些页面除了动态内容不同,其他的页面部分都相同,这个时候需要怎么配置路由和组件呢?

    这种场景就需要用到路由的参数功能,增加一条包含参数的路由配置。

    import List from './component/list';
     
    <Route path="list/:id" component={List} />


    注意 path 属性中的 :id 就是该路由的参数( param )。再来看看 List 页面的组件。

    /list 对应了 list.js
    
    import React from 'react';
    class List extends React.Component {
        render () {
            return (
                <div>
                    <h3>This is List page.</h3>
                    <p>The list page id is 
                        <b style={{color: 'red'}}>{this.props.match.params.id}</b>
                    </p>
                </div>
            );
        }
    };
    export default List;


    在 List 组件中,可以直接通过 this.props.match.params.id 来访问实际的参数值(这里的id key 就和定义路径的 :id 相对应),React Router 将路由的数据都通过 props传递给了页面组件,这样就可以非常方便的访问路由相关的数据了。

    展开全文
  • react路由 - 参数

    2017-08-04 16:31:20
    1、我们把前面Home组件改动一下,用来展示新闻列表import React from 'react'; import axios from "axios";export default class Home extends React.Component{ // 构造 constructor(props) { super(props); //
  • 慢慢整理哈! componentWillMount() { let visitor = this.props.location.search; visitor = visitor.split('=')[1]; this.setState({visitor:visitor}); } 参考: ...
  • 需求:路由跳转的时候将参数传递给跳转之后的页面。 路由: &lt;Route path='/confirmOrder' component={ConfirmOrder} /&gt; 方案一:使用query,特点是参数会出现在url上,刷新页面数据不会丢失 ...
  • 此篇文章是基于react路由系列01___ 在react脚手架里使用React-router(简单入门)和react路由系列02___ 二级路由上写的,如果你有路由基础,可以直接看这篇文章,如果没有路由基础,则建议先看前两篇文章。 react路由...
  • 此篇文章是基于react路由系列01___ 在react脚手架里使用React-router(简单入门)和react路由系列02___ 二级路由上写的,如果你有路由基础,可以直接看这篇文章,如果没有路由基础,则建议先看前两篇文章。 react路由...
  • 类比vue中路由跳转及传参: 传递参数:this.$router.push({ 'name':'',...React 中如下: 路由跳转: this.props.history.push() this.props.history.replace() this.props.history.go() 传递参数:&l...
  • 我项目完整代码请进入我的github“星座运势”github上源码地址欢迎点一下star(^_^),在这个项目中使用了react框架组件化开发、react路由实现界面跳转和参数传递,此外我所使用的数据来源于ShowAPI接口。一下为路由...
  • 在简述react路由之前首先需要说的就是理由主要分为两类:前端路由和后端路由,其功能用法也不同. 1. **前端路由**:其主要功能是根据不同的URL路径去切换不同的组件. 2. **后端路由**:其主要功能是根据用户不同的...
  • 默认情况下,路由中的规则是模糊匹配的,如果路由可以部分匹配成功,就会展示这个路由对应的组件。看下面的例子: <Link to="/movie/top250/10">电影</Link> <Route path="/movie" component={Movie}...
  • 在antd项目的开发中使用的路由react-Router的路由,在使用是经常出现刷新当前页面后参数消失导致显示错误的问题: 解决办法: 1.最开始我的解决办法是将参数放在search参数先,然后通过截取地址栏来获取。(不...
  • 1. match通过路径 <Route path="/path/:name" ...路由组件内获取参数使用 this.props.match.params.name 2. query String 通过search //mirrorx中使用push的参数search,link中使用与此类...
  • react路由传递的过程中,我第一次写的版本是直接把我要的所有参数通过location里的state传递过去,因为我觉得很方便,不用再特地去dispatch请求一次数据,代码像这样: update=(record)=&gt;{ if(record &...
  • 路由组件】------>【路由组件】 (1)从路由A页面 (-----跳转----> ) 到路由B页面。 this.props.history.push( ' /product/detail ' ) (2)从路由A页面 (-----跳转,并且携带相应的参数。----> ) ...
  • 1. 在App.js配置详情页面的路由 <Route path="/Detail/:id" component={Detail} /> 2. 父页面,主要看页面里的routerTo()方法 import React, {Component} from 'react'; import {Link} from 'react-...
  • react-router路由参数

    2019-11-27 09:42:03
    通配传参 1、 使用props.params 传值 <Route path="/path/:id" component={App} /> //Link组件,路由跳转,类似...//子组件中获取参数 this.props.match.params.id 如果需要传对象的话,可先将对象转化为字...
1 2 3 4 5 ... 20
收藏数 10,961
精华内容 4,384