如何在单独的组件中使用url参数
如何在单独的组件中使用url参数
提问于 2018-03-29 15:09:14
在过去的两天里，我一直在学习React，并且我在理解URL参数方面遇到了困难。
假设我想要一条路线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;id在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: match.id,
};
}
render() {
return this.state.id;
}
}但是match还没有定义。
Stack Overflow用户
回答已采纳
发布于 2018-03-29 15:14:56
通过组件道具将组件传递给Route：
<Route path="/details/:id" component={DishDetails} />如果您这样做了，那么match在道具中是可用的。
如果必须保持呈现路由的方式，则可以手动将呈现道具传递给组件：
<Route path="/details/:id" render={(props) => <DishDetails {...props} />}/>您可以找到react路由器这里的全部文档。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49559482
复制相关文章
相似问题
腾讯云开发者
