从react路由器获取url参数并在组件中使用

Question

我想从这个react路由器(App.js(的url中获取id参数

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

我想在FireCess组件(FireCess.js(内的其他url中使用id参数

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;

}
}

如何获取组件内部的id参数？

我曾尝试使用this.props.match.params.id，但遇到一个错误，称TypeError:无法读取未定义的属性"match"。(react路由器版本为^5.2.0(

Answer 1

您还没有在url中定义：id，这就是为什么它在错误中没有定义，所以不是这个

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

声明一个表示id的变量；类似于：

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