How to access url parameter in a react component

Question

I have a react component which is loaded on routing

I need to access a parameter from the url inside the components constructor

How do I do it?

can I access it like this:

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

Does this answer your question? [React - How to get parameter value from query string](https://stackoverflow.com/questions/35352638/react-how-to-get-parameter-value-from-query-string) — Michael Freidgeim, Feb 18 '20 at 21:21

Dev · Answer 1 · 2018-03-01T12:36:48.377

10

You can access route parameter in react-router-dom v4.x, by getting params from the match props.

Where you define your routes,

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>
...

In your component,

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

edited Mar 01 '18 at 12:36

answered Mar 01 '18 at 09:29

Dev

3,922
3
24
44

6

Not working for react-router-dom 4.3.1. Getting `Cannot read property 'params' of undefined` error. Found a question here on stackoverflow but that's not much helpful – Hussain Aug 13 '18 at 06:31

score 7 · Answer 2 · edited Dec 30 '20 at 09:54

7

if you use routing then you can specify your route to expect the parameter.

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

your component needs to be wrapped in the withRouter HOC for you to access this.

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

edited Dec 30 '20 at 09:54

A Nayak

15
4

answered Mar 01 '18 at 09:33

Sujit.Warrier

2,815
2
28
47

what is the use of `match` in `constructor(props,{match}) {}` – Rahul Yadav Mar 02 '18 at 17:17
when you wrap your commponent is withRouter, you get the match props, which contains all your url information like query strings etc – Sujit.Warrier May 19 '19 at 02:55

Miguel Calderón · Answer 3 · 2020-03-05T10:57:59.773

4

You can do it like this:

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

edited Mar 05 '20 at 10:57

answered Mar 01 '18 at 09:31

Miguel Calderón

3,001
1
16
18

score 0 · Answer 4 · answered Jun 20 '20 at 16:58

0

As {match} is passed to the component as a prop(property) so we can access this prop as a normal prop way.

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

answered Jun 20 '20 at 16:58

user2516695

9
1

score 0 · Answer 5 · answered Jun 17 '21 at 04:37

Routes

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;

Component

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;

How to access url parameter in a react component

5 Answers5