Get url parameter from react-router and use in Component

Question

I want to get id parameter from the URL of this react-router (App.js):

import React from "react";
import ReactDOM from "react-dom";
import Main from "./ui.js";
import Master from "./master.js";
import FireCess from "./FireCess";
import { Component } from "react";
import { BrowserRouter, Route,Link, Switch } from "react-router-dom";

class App extends Component{
    render(){
        return(
        <div className="root">
        <BrowserRouter>
          <Switch>
          <Route exact path="/masters/:id/PropertyTax/FireCess" component={FireCess}/>
          <Route exact path="/masters/pb/tenant/tenants" component={Master} />
          <Route exact path='/' component={Main} />
           
          </Switch>
        </BrowserRouter>
      </div>
        );
    }
}

export default App

I want to use that id parameter in the other URL inside the FireCess component (FireCess.js):

import React from "react";
import Admin from "react-crud-admin";
import Form from "react-jsonschema-form";
import axios from "axios";
import Select from 'react-select';
import Master from "./master.js";

import { BrowserRouter, Route,Link, Switch, useParams } from "react-router-dom";

import "react-crud-admin/css"; //optional css import


export default class FireCess extends Admin {
  constructor(props) {
    super();
   
    
    this.name = "Tenant";
    this.name_plural = "Tenants";
    this.list_display_links = ["rate"];
    this.list_display = ["rate","fromFY"];
   
    this.list_per_page = 10;
  

  
  }
  

  get_queryset(page_number, list_per_page, queryset) {

    axios.get("/masters/:id/PropertyTax/FireCess",{
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    
    }).then(response => {

   
      this.set_queryset(response.data);

    });

    return queryset;


  }
  }

How do I get id parameter inside the component?

I have tried using this.props.match.params.id but got an error saying:

TypeError: Cannot read property 'match' of undefined.(react-router version is ^5.2.0)

Alex Yepes · Accepted Answer · 2020-10-27 17:08:52Z

2

You haven't defined :id in your url, that is why it's undefined in your error, so instead of this

axios.get("/masters/:id/PropertyTax/FireCess",{
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }

declare a varible that represents the id; something like:

const id = yourId;

axios.get(`/masters/${id}/PropertyTax/FireCess`, {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }

answered Oct 27, 2020 at 17:08

Alex Yepes

1,2051 gold badge11 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Taylor swift Over a year ago

I have used const id=this.props.match.params.id in the constructor class and modified :id to ${id} but I'm still getting TypeError: Cannot read property 'match' of undefined. Can you please tell me where the mistake was?

Alex Yepes Over a year ago

Well... where is that id coming from in the first place? it's hard to tell without knowing what you are trying to do. I assume that if you are using parameters in your URL is because you have that information somewhere already (a database perhaps?); if you don't have any id, then why include it as a parameter?.

Collectives™ on Stack Overflow

Get url parameter from react-router and use in Component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related