路由參數

成都創(chuàng)新互聯(lián)公司長期為1000多家客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網生態(tài)環(huán)境。為資中企業(yè)提供專業(yè)的成都做網站、網站制作，資中網站改版等技術服務。擁有十年豐富建站經驗和眾多成功案例,為您定制開發(fā)。

假如我們有很多 list 頁面，這些頁面除了動態(tài)內容不同，其他的頁面部分都相同，這個時候需要怎么配置路由和組件呢？

這種場景就需要用到路由的參數功能，增加一條包含參數的路由配置。

import List from './component/list';

注意 path 屬性中的 :id 就是該路由的參數（ param ）。再來看看 List 頁面的組件。

/list 對應了 list.js

import React from 'react';
class List extends React.Component {
 render () {
 return (
 

 
This is List page.
 
The list page id is 
  {this.props.params.id}
 
 
 );
 }
};
export default List;

在 List 組件中，可以直接通過 this.props.params.id 來訪問實際的參數值（這里的id key 就和定義路徑的 :id 相對應），React Router 將路由的數據都通過 props傳遞給了頁面組件，這樣就可以非常方便的訪問路由相關的數據了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。