如何访问react组件中的url参数

Question

我有一个react组件，它加载在路由上

我需要从components构造函数中的url访问一个参数

我该怎么做呢？

我可以这样访问它吗：

class CustomCoponent extends React.Component {
    constructor(props,{match}) {
    }
}

Answer 1

你可以这样做：

class CustomComponent extends React.Component {
    constructor({ match, ...props }) {
        console.log(match.params)
    }
}

Answer 2

如果使用路由，则可以指定预期参数的路由。

 <Route path='/yourpath/:ParamName' component={CustomComponent}/> 

您的组件需要包装在withRouter HOC中，才能访问此组件。

 import {withRouter} from 'react-router-dom';
 class CustomComponent extends React.Component{
   constructor(props){
   }
   //**ACCESS PARAMETER VALUE LIKE THIS**
   sample(){
      let Paramvalue=this.props.match.params.ParamName;
   }   
 }
 export default withRouter(CustomComponent);

Answer 3

您可以通过从匹配道具获取参数来访问react-router-domv4. x中的路由参数。

你定义路线的地方，

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

...
<Router>
  <App>
    <Switch>
      <Route exact path="/" component={List} />
      <Route path="/:parameterToAccess" component={CustomComponent} />
    </Switch>
  </App>
</Router>
...

在您的组件中，

class CustomComponent extends React.Component {
   constructor(props) {
     super(props);
     this.routeParam = props.match.params.parameterToAccess;
   }
}