分享一個react在元件中取得路由參數的實例

這篇文章主要介紹了詳解react如何在組件中取得路由參數，具有一定的參考價值，有興趣的小夥伴們可以參考一下

路由參數

假如我們有很多list 頁面，這些頁面除了動態內容不同，其他的頁面部分都相同，這個時候需要怎麼設定路由和元件呢？

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

import List from './component/list';

<Route path="list/:id" component={List} />

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

/list 对应了 list.js

import React from 'react';
class List extends React.Component {
 render () {
 return (
 <p>
 <h3>This is List page.</h3>
 <p>The list page id is 
  <b style={{color: &#39;red&#39;}}>{this.props.params.id}</b>
 </p>
 </p>
 );
 }
};
export default List;

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

以上是分享一個react在元件中取得路由參數的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！