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

Question

过去 2 天我一直在学习 React，但在理解 URL 参数方面遇到了困难。

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

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

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

这是我的 DishDetails View 现在的样子:

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;

在哪里可以获取 DishDetails 中的 id？我试过:

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未定义。

Answer 1

通过组件 props 将组件传递到 Route:

<Route path="/details/:id" component={DishDetails} />

如果您执行了此匹配，则可以在 Prop 中找到。

如果您必须保持渲染路线的方式，您可以将渲染 Prop 手动传递给组件:

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

您可以找到react-router here的完整文档.