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

Question

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

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

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

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

下面是我的dishdestails视图现在的样子：

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;

在哪里可以获得详细信息中的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

你有没有尝试过react-router自带的with路由器函数？

import { withRouter } from 'react-router'

class App extends Component {
   .... your stuff
}

export default withRouter(App);

这样你就可以使用“匹配”道具了

Answer 2

• 匹配
• 位置
• 历史

您需要为

const DishDetails = props => <div>Details Id: {props.match.params.id}</div>;

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

这是您示例中的路线道具：

{
    match: { path: '/details/:id', url: '/details/1', isExact: true, params: { id: '1' } },
    location: { pathname: '/details/1', search: '', hash: '' },
    history: { length: 3, action: 'POP', location: { pathname: '/details/1', search: '', hash: '' } }
}

使用

在这里阅读更多

Answer 3

通过组件道具将组件传递到路线：

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

如果您这样做了，则道具中提供了匹配。

如果你必须保持渲染路线的方式，你可以手动将渲染道具传递给你的组件：

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

你可以在这里找到反应路由器的整个留档。