zoukankan      html  css  js  c++  java
  • react 路由获取参数

    在简书页面中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中执行相应的代码如下所示:

     
  • 相关阅读:
    Git

    学而不记则徒劳无功
    Redis基础
    哈希表
    第一个Python程序
    Python 环境搭建 基于 Windows
    执行数据库的插入操作 insert
    Eclipse连接到My sql数据库的操作总结/配置数据库驱动
    数据库 (一)
  • 原文地址:https://www.cnblogs.com/zhx119/p/10867911.html
Copyright © 2011-2022 走看看