我有一个类似的URL结构http://localhost:3001/article?id=12345，我想将商品ID参数路由到React组件中。我Route就是这样<Route path="/article?id=" component={ArticleDetail}/>，目前我只是想让它打印出组件中参数的值，如下所示：
class ArticleDetail extends Component {
render() {
const {location} = this.props.location;
return (
<div>
<h2>Article Detail</h2>
<p>This will show the full Article detail</p>
<p>props: {location}</p>
</div>
);
}
}
export default ArticleDetail;
我完全看不到该组件。什么是Route我需要得到它加载组件，所以我可以再剥离出的参数值？
我不会在已匹配的查询参数path您的Route。查询参数只是键/值对，并且可能以随机顺序出现。在路线中匹配它们已经对它们的顺序进行了假设。
<Route path="/article" component={ArticleDetail}/>
在其中，ArticleDetail您可以获取如下查询参数：
const id = URLSearchParams(this.props.location).search.get('id');
但通常在处理标识实体的ID时，无论如何都不会使用查询参数。您宁愿使用以下路径：文章ID/article/12345在哪里12345：
<Route path="/article/:id" component={ArticleDetail}/>
然后，您可以像这样简单地访问它：
const {id} = this.props.match.params;
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句