如何在反应组件中访问 url 参数答案

【问题标题】：How to access url parameter in a react component如何在反应组件中访问 url 参数
【发布时间】：2018-08-09 07:58:37
【问题描述】：

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

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

我该怎么做？

我可以这样访问吗：

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

【问题讨论】：

这能回答你的问题吗？ React - How to get parameter value from query string

标签： reactjs react-router

【解决方案1】：

路线

import logo from './logo.svg';
import './App.css';
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';

import UpdateEmployeeComponent from './components/UpdateEmployeeComponent';

function App() {
  return (
      <div>
        <Router>
          <div className="container">
            <Switch>
              <Route path="/update-employee/:id" component={UpdateEmployeeComponent}></Route>
            </Switch>
          </div>          
        </Router>
      </div>

  );
}

export default App;

组件

import React, { Component } from 'react';

class UpdateEmployeeComponent extends Component {
    constructor(props){
        super(props);
        this.state ={
            id : this.props.match.params.id                  
        }           
        console.log('Employee Id ::: '+this.id);
    }    

    render() {
        return (
            <div>
            
            </div>
        );
    }
}
export default UpdateEmployeeComponent;

【讨论】：

【解决方案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);

【讨论】：

match在constructor(props,{match}) {}中有什么用
当你用路由器包装你的组件时，你会得到匹配道具，其中包含你所有的 url 信息，如查询字符串等

【解决方案3】：

因为 {match} 作为 prop(property) 传递给组件，所以我们可以像普通的 prop 方式一样访问这个 prop。

class CustomComponent extends React.Component {
console.log(this.props.match.url)
}

【讨论】：

【解决方案4】：

你可以这样做：

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

【讨论】：

【解决方案5】：

您可以通过从match props 获取参数来访问react-router-dom v4.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;
   }
}

【讨论】：

不适用于 react-router-dom 4.3.1。收到 Cannot read property 'params' of undefined 错误。在 stackoverflow 上找到了一个问题，但这并没有多大帮助