How to get URL parameters by react component

/ / client
index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
import registerServiceWorker from "./registerServiceWorker";

ReactDOM.render(<div><Router><Route path="/supplies/:client_id" component={App}></Route></Router></div>, document.getElementById("root"));

App.js

class App extends Component {
  state = {users: [],
          products:[]};
  
  steps = ["","","","",""];

  componentDidMount() {
    console.log(this.props.params.client_id);  //
    fetch("/supplies/320001")
      .then(res => res.json())
      .then(products => this.setState({ products }));
  }

visit
http://localhost:3000/supplies/320001
http://localhost:3000/supplies/420001

how to get 320001 or 420001

May.27,2021

this.props.params.client_id

this

 this.props.match.params

@ this is the current component, and http://localhost:3000/supplies/320001 320001 is client_id.. Is
used incorrectly?


you print out this.props . The parameters related to routing are location history match .

so the parameters you passed are in match . Not params , this is a parameter of the older version router .

Menu