Question

过去2天我一直在学习React，而且我在理解网址参数方面遇到了麻烦。

我想说我想要一条路线mysite.com/details/1023。路线定义如下：

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

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

这是我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;

我在哪里可以获得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

通过组件道具将组件传递给Route：

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

如果你这样做了，match在道具中可用。

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

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

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

Answer 2

<Route render>道具收到router props：

match
location
history

您需要向<DishDetails>组件提供该道具，并使用match.params.id从id

中检索path="/details/:id"

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: '' } }
}

有三种方法可以使用<Route>呈现内容：


<Route component>

<Route render>

<Route children>

了解更多here

Answer 3

您是否尝试过react-router附带的withRouter功能？

import { withRouter } from 'react-router'

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

export default withRouter(App);

这应该可以让您访问＆＃34;匹配＆＃34;丙

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

3 个答案: