react-router4 如何传递参数并接收

Question

问题描述

刚开始学习react，在react-router4传递参数这里卡住了，请各位大神帮帮忙。

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
这
import React from 'react';
export default class ComponentList extends React.Component{

constructor (props){
    super(props)
    console.log(this.props.match.params.id);
}
render(){
    return(
        <div>
            <h2>这里是列表页面</h2>
            <h2>id是: {this.props.match.params.id}</h2>
        </div>
    )
}

}

你期待的结果是什么？实际看到的错误信息又是什么？

就是想获取到url上的参数id，/index.html#/user/123123 就是这个123123.
console.log(this.props.match.params.id);这句话能把123123打出来。
但是 <h2>id是: {this.props.match.params.id}</h2>这里就报错。
我应该怎么写才能在return里面获取到这个id参数呢？拜托各位求教

Answer 1

<Route path='/user/:id' component={ComponentList} />

Answer 2

<Switch>
            <Route exact path='/' component={ Home } />
            <Route path='/about/:number' component={ About } />
</Switch>

结合

<Link key={item} to={`/about/${item}`}>about{item}</Link>