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;

這樣我們就能接收到路由傳過來的值，
如果有問題，可以加我微信一起討論，我們一起進步！
屏幕前的你，加油！