Share an example of obtaining routing parameters in react components

This article mainly introduces the detailed explanation of how react obtains routing parameters in components. It has certain reference value. Interested friends can refer to

routing. Parameters

Suppose we have many list pages. Except for the dynamic content of these pages, other page parts are the same. How do we configure routing and components at this time?

In this scenario, you need to use the routing parameter function and add a routing configuration containing parameters.

import List from './component/list';

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

Note that :id in the path attribute is the parameter (param) of the route. Let's take a look at the components of the List page.

/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;

In the List component, you can access the actual parameter values ​​directly through this.props.params.id (the id key here is similar to the :id that defines the path Corresponding), React Router passes all routing data to page components through props, so that you can access routing-related data very conveniently.

The above is the detailed content of Share an example of obtaining routing parameters in react components. For more information, please follow other related articles on the PHP Chinese website!