路由參數(shù)

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

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

import List from './component/list';<Route path="list/:id" component={List} />

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

/list 對應(yīng)了 list.jsimport React from 'react';class List extends React.Component { render () { return ( <div> <h3>This is List page.</h3> <p>The list page id is   <b style={{color: 'red'}}>{this.props.params.id}</b> </p> </div> ); }};export default List;

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯新站長站。