列表页面传递一个id给对应的详情页面(做项目时的简单总结)

我们经常会遇见一个列表页面，我们需要点击到它的详情页面去看一看。
这时就会用到传递一个id，给详情页面。

//这是列表页面的函数

//点击列表页面的每一项时，跳到对应的详情页面
//一般我们传的都是id
//点击事件，跳转到详情页面

itemClicklEvent(index) {
    //console.log('跳转到列表详情页面');
    //得到id，这个很简单
    let id = this.state.contentList[index].id;
    //console.log('type',type);
    //跳转到详情页面去
    this.props.history.push(`/distribute_detail/${id}`);
}

详情页面

//首先需要得到id
componentDidMount(){
    /**
     *  @newsDetailData 对请求到对应id数据进行处理
     *  @param{} 参数uri=admin/alliance/messages/${id}
     *
     */
    let id = this.props.match.params.id;
    //console.log(id);
    newsDetailData(`uri=admin/alliance/messages/{id}`).then(res => {
        if(res.status !== 200){
            console.log('您目前无法获取消息详情页的数据');
        }else{
            return res.json()
        }
    }).then(data=>{
        console.log('newsDetailData',data);
        this.setState({
            machine_code: data.sn,
            time: data.createdTime,
            location: data.address,
            content: data.content,
            description: data.description
        })
    }).catch(e=>{
        console.log('数据请求失败！');
    })
}

路由配置
这里面是通知页面和通知详情页面
报告页面和报告详情页面

<Router history={ history } >
    <div style={{ width: '100%',height: '100%'}}>
        <Route exact path="/" component={ Login } />
        <Route path="/home" component={ Home } />
        <Route path="/billitemized" component={ billItemiezd } />
        <Route path="/calender" component={ Calender } />
        <Route path="/billing_report" component={ Billing } />
        <Route path="/income_detail" component={ Income } />
        <Route path="/report_detail/:id" component={ Report } />
        <Route path="/news_inform" component={ Inform } />
        <Route path="/news_detail/:id" component={ News } />
        <Route path="/no_found" component={ NoFound } />
    </div>
</Router>

主要是这种写法：

<Route path="news_inform" component={ Inform }/>
<Route path="news_detail/:id" component={ News }/>