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

Posted 2023-02-21

【中文标题】如何在反应组件中访问 url 参数

【英文标题】：How to access url parameter in a react component

【发布时间】：2018-08-09 07:58:37

【问题描述】：

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

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

我该怎么做？

我可以这样访问吗：

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

【问题讨论】：

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

【参考方案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 错误。在 *** 上找到了一个问题，但这并没有多大帮助