如何在单独的组件中使用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还没有定义。
回答 3
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用户
发布于 2018-03-29 15:44:13
支柱接收路由器道具
matchlocationhistory
您需要向<DishDetails>组件提供支持，并使用match.params.id从path="/details/:id"检索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>
阅读更多这里
Stack Overflow用户
发布于 2018-03-29 15:14:18
你试过反应路由器附带的withRouter功能吗？
import { withRouter } from 'react-router'
class App extends Component {
.... your stuff
}
export default withRouter(App);它可以让你获得“匹配”道具。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49559482
复制相关文章
相似问题
腾讯云开发者
