詳解react如何在組件中獲取路由參數(shù)

更新時(shí)間：2017年06月15日 11:53:04 作者：沈斯明

這篇文章主要介紹了詳解react如何在組件中獲取路由參數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

路由參數(shù)

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

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

import List from './component/list';

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

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

/list 對(duì)應(yīng)了 list.js

import 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 組件中，可以直接通過(guò) this.props.params.id 來(lái)訪問(wèn)實(shí)際的參數(shù)值（這里的id key 就和定義路徑的 :id 相對(duì)應(yīng)），React Router 將路由的數(shù)據(jù)都通過(guò) props傳遞給了頁(yè)面組件，這樣就可以非常方便的訪問(wèn)路由相關(guān)的數(shù)據(jù)了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用React實(shí)現(xiàn)一個(gè)簡(jiǎn)單的待辦任務(wù)列表
這篇文章主要給大家介紹了使用React和Ant Design庫(kù)構(gòu)建的待辦任務(wù)列表應(yīng)用,它包含了可編輯的表格,用戶可以添加、編輯和完成任務(wù),以及保存任務(wù)列表數(shù)據(jù)到本地存儲(chǔ),文中有相關(guān)的代碼示例,需要的朋友可以參考下
2023-08-08
React Native功能豐富的Toast通知庫(kù)
這篇文章主要為大家介紹了React Native功能豐富的Toast通知庫(kù)使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
基于webpack4.X從零搭建React腳手架的方法步驟
這篇文章主要介紹了基于webpack4.X從零搭建React腳手架的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
React tsx生成隨機(jī)驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了React tsx生成隨機(jī)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
React.js入門學(xué)習(xí)第一篇
這篇文章主要為大家介紹了React.js入門學(xué)習(xí)第一篇，詳細(xì)解析React.js基礎(chǔ)知識(shí)，全方位的了解React.js，感興趣的小伙伴們可以參考一下
2016-03-03
關(guān)于react hook useState連續(xù)更新對(duì)象的問(wèn)題
這篇文章主要介紹了關(guān)于react hook useState連續(xù)更新對(duì)象的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
React styled-components設(shè)置組件屬性的方法
這篇文章主要介紹了styled-components設(shè)置組件屬性的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
react如何同步獲取useState的最新?tīng)顟B(tài)值
這篇文章主要介紹了react如何同步獲取useState的最新?tīng)顟B(tài)值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
create-react-app構(gòu)建項(xiàng)目慢的解決方法
這篇文章主要介紹了create-react-app構(gòu)建項(xiàng)目慢的解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
react中fetch之cors跨域請(qǐng)求的實(shí)現(xiàn)方法
本篇文章主要介紹了react中fetch之cors跨域請(qǐng)求的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03