我有一个在路由上加载的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);