列表页面传递一个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}`);}

详情页面

//首先需要得到idcomponentDidMount(){    /**     *  @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 }/>