Question

我正在努力了解＆＃34;反应＆＃34;使用react-router（v2.4.0）访问当前应用程序位置的方法。在新的react-router破坏更改等之前，我能够使用

<h1>Photo Gallery </h1>
<br>

<div id="gallery">

<div id="bigImgContainer">
<img id="bigImg"  src="http://placehold.it/150?text=Img1">
</div><!-- end "bigImg" -->

<div id="thumbnails"  >
<img  src="http://placehold.it/150?text=Img1">
<img  src="http://placehold.it/150?text=Img2">
<img  src="http://placehold.it/150?text=Img3">
<img  src="http://placehold.it/150?text=Img4">
<img  src="http://placehold.it/150?text=Img5">

</div><!-- end "thumbnails" -->


</div><!-- end "gallery" -->

<script type="text/javascript"> 
function imgFunction(){
var bigImg = document.getElementById ("bigImg");
var smallImg=	document.getElementById ("thumbnails");
       smallImg.addEventListener("click", function(event){
       if (event.target.tagName=="IMG"){
		bigImg.src=event.target.src;
		
	}
},false);
	
}
window.addEventListener("load",imgFunction,false);
</script>

现在似乎我可以再次将路由器注入到我的组件的上下文中，但路由器实例本身不包含api以获取与当前位置或查询参数等相关的任何内容。因此弹出逻辑问题：＆＃34;我这样做了吗？＆＃34;。

经过一番研究后，我发现我正在使用的react-router的Route组件正在将该位置注入到映射到该路由的组件的属性中。这太棒了！但是在我的情况下，我有多层组件嵌套在主组件的深处，映射到Route，所以：＆＃34;我应该将this.props.location一直传递给实际需要它的组件，还是有一种更人性化的方式来制造它？＆＃34;

那么在代码中可能需要获取当前路由器路径，查询参数和类似内容的正确方法是什么？我是否应该直接使用this.props.router和/或browserHistory对象，我是否应该找到一种方法将this.props.location传播到我需要的地方，或者我在图片中遗漏了什么？< / p>

谢谢你的时间！

Answer 1

这取决于您将采用的方法的应用程序结构，但是this.props.location.query将包含您在react-router v2 +中给定Route组件的查询参数。

例如，如果您访问了/result?foo=bar&apple=orange之类的内容，则可以从路由组件中找到bar this.props.location.query.foo和orange this.props.location.query.apple

另一方面，

this.props.params将包含您可能映射到路线的常规动态参数，因此对于/profile/users/:userID之类的内容，您可以在this.props.params.userID中找到指定路线的用户ID 。

您可以将这些作为道具传递给任何需要它们的子组件，就像任何React组件一样，但您也可以考虑这些子项是否应该是嵌套路由本身/可以直接访问自己的{{1来自路由器，或者父母能够在传递逻辑之前自己处理逻辑。

官方文档提供了一些非常好的示例和用于构建应用的用例，值得查看：https://github.com/reactjs/react-router/blob/master/docs/Introduction.md

在React中访问CurrentPath的正确方法

1 个答案: