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

Posted 2021-04-16

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

我需要从组件构造函数中的url访问参数

我该怎么做？

我可以像这样访问它：

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

答案

您可以通过从react-router-dom道具获取参数来访问v4.x match中的路线参数。

在哪里定义路线，

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

另一答案

你可以这样做：

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

另一答案

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

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

您的组件需要包含在withRouter HOC中，以便您访问它。

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