如何在单独的组件中使用url参数

我过去两天一直在学习React，但是在理解URL参数方面遇到了麻烦。

假设我要一条路线mysite.com/details/1023。路线的定义如下：

<Route path="/details/:id" render={() => <DishDetails />}/>

现在，我希望DishDetails在另一个文件中定义的对象能够使用idvalue 1023。我怎样才能做到这一点？我找到了有关路由网址参数的教程，但都没有说明如何实现此目的的教程。

这是我DishDetails现在的样子：

import React, {Component} from "react";
import "./DishDetails.css";
import {Link} from "react-router-dom";

class DishDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: /*url param*/,
        };
    }
    render() {
        return this.state.id;
    }
}

export default DishDetails;

我在哪里可以获得idDishDetails？我试过了：

import React, {Component} from "react";
import "./DishDetails.css";
import {Link} from "react-router-dom";

class DishDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            id: match.id,
        };
    }
    render() {
        return this.state.id;
    }
}

但是match是不确定的。