Reactjs 将道具传递给组件，反应路由器V4

我有一个包含以下组件树的应用程序：

App
   Header
   Main
     Searcher
     List_of_albums
       Album

所以，我的想法是在主页上有一个相册搜索器，在搜索后显示一个相册列表。为此，我在组件Main中读取一个.json文件，然后将这些道具传递给listofAlbums和Album

到目前为止，一切正常

现在，我想用一个按钮访问新路径中每个相册的信息：/id\u\u该相册

此按钮在组件相册中本地化，如下所示：

let albumLink = `/${this.props.id}`
<Link to={albumLink}></Link>

import singlejson from '../data/""""herethe_id_of_the_album"""".json'

<Route path='/:id_of_the_album' render={props => <Profile {...props} /> } />

但是我如何才能将相册的id传递到组件配置文件中呢

let albumLink = `/${this.props.id}`
<Link to={albumLink}></Link>

import singlejson from '../data/""""herethe_id_of_the_album"""".json'

<Route path='/:id_of_the_album' render={props => <Profile {...props} /> } />

}/>

现在在

Profile

组件中，它应该可以通过以下方式获得：

---

在react router中，当您从一个组件路由到另一个组件时，您将拥有一个对象
match
，其中包含许多属性。其中一个是
params
，它帮助我们识别是否有任何参数通过路由传递给子组件

在您的情况下，您可以在子组件中使用相册的
match.params.id\u

提供有关react router的更多信息。
但是我如何将{…props}传递到配置文件，因为我没有在组件应用程序中定义此变量“id_of the_album”？
props
将通过路由组件传递，注意：
呈现={props=>…}
，路由将该id传递到配置文件组件：）尝试此答案它会工作，如果您有任何其他疑问，请告诉我。@MayankShukla
this.props.match.params.id
在我尝试此操作时丢失了
id
。我怎么才能拿到身份证？我有
}/>
，我可以看到
匹配。params
但没有
id
@shorif2000 id是一个参数，请确保在url中传递它，在您的情况下，url应该是：
/commsmatrix/aggr/10
（在10的位置需要一些值），如果这不能解决您的问题，请告诉我。@MayankShukla这是我所做的，但它不起作用，我正在通过
/10
。这是在json
{“路径”：“/”、“url”：“/”、“参数”：{}、“isExact”：false}
中，在我的
Commsmatrix聚合视图
组件中。我正在使用
v4.2.0
您将无法像这样打开json文件。当你的应用程序在浏览器中运行时，导入将已经消失。导入是在编译时进行的，而不是在运行时。您将需要从服务器获取这些文件。我已经完成了这项工作，其工作如下：var data=require（'../data/'+this.props.match.params.id+'.json'）；它错了吗？首先，您尝试要求的路径是相对文件路径。但出于安全原因，浏览器无法访问文件系统。其次，此路径是相对于计算机上的应用程序根目录的。这应该指客户端上的哪个文件夹。这个文件应该从哪里来？我无法想象这会像你期望的那样起作用。通常，您必须从api获取此类数据。如果你添加一张相册呢？是否要在每次添加相册以将该文件包含在捆绑包中时部署应用程序？