React 路由传值

1.列表页

// 字符串模板拼接，
<Link to={`/plumis/${item.uid}`}>{item.name}</Link>

import React, {Component} from 'react';
import '../assets/css/Cty.less'
import { Link } from "react-router-dom";

class Cty extends Component{
    constructor(props){
        super(props)
        this.state ={
           list:[
              {
                name:'主页',
                uid:'1'
             },
             {
                name:'热点',
                uid:'2'
             },
             {
                name:'常规',
                uid:'3'
             },
             {
                name:'遇见',
                uid:'4'
             },
             
           ],
        }
    }
    render(){
        return(
            <div className='cty'>
               <h2>我是cty</h2>
                <div className='cty_list'>
                    {
                     this.state.list.map((item,key) => {
                        return (
                            <span key={key}>
                                <Link to={`/plumis/${item.uid}`}>{item.name}</Link>
                            </span>
                          )
                        })
                    }
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                </div>  
            </div>
        )
    }
}
export default Cty;

2. 路由模块配置

import Home from '../components/Home'
import Cty from '../components/Cty'
import Reactfrom from '../view/Reactform/Reactform'
import News from '../components/News'
import Plumis from '../view/plumis/Plumis'
import Getdata from '../view/getdata/Getdata'

const routes = [
    {
       path:'/',
       component: Home,
       exact:true,
    },
    {
      path:'/plumis/:uid',    //详情页面路由  冒号拼接参数
      component:Plumis,
    },
    {
      path:'/getdata',
      component:Getdata,
    },
  
]

export default routes;

3. 详情页面
   获取路由传值：
   this.props.match.params.uid

import React,{Component} from 'react'

class Plumis extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:'plumis'
         };
    }
    //页面加载完成 （dom）操作
    componentDidMount(){
        // 获取动态路由传值
            console.log(this.props.match.params.uid)
    }
    render() {
        return (
            <div className='plumis'>
                 <h2>{this.props.match.params.uid}</h2>
                 <p>{this.state.msg}</p>
            </div>
        );
    }
}

export default Plumis;

这样我们就能接收到路由传过来的值，
如果有问题，可以加我微信一起讨论，我们一起进步！
屏幕前的你，加油！