我有一个使用此组件树的应用程序:
App
Header
Main
Searcher
List_of_albums
Album
所以,我的想法是在主页面上有一个专辑搜索者,这会在搜索后显示一个专辑列表。为此,我正在组件Main中读取一个.json文件,然后将props传递给List_of_albums和Album。
到目前为止,一切正常。
现在我想以新的路线中的每个相册的信息进行访问:/ id_of_the_album。
此按钮本地化在组件相册中,如下所示:
let albumLink = `/${this.props.id}`
<Link to={albumLink}></Link>
为此,我在组件App中尝试了这个:
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
class App extends Component {
constructor(){
super()
}
render () {
return (
<Router>
<Fragment>
<Header />
<Switch>
<Route exact path='/' render={() => {
return(
<Main />
)
}} />
<Route path='/:id_of_the_album' render={() => {
return(
<Profile />
)
}} />
</Switch>
</Fragment>
</Router>
)
}
}
其中个人资料是显示相册详细信息的新组件。 在这个新的组件中,我想打开各个专辑的jsons:
import singlejson from '../data/""""herethe_id_of_the_album"""".json'
但是如何将组件配置文件传递给id_of_the_album ??
答案 0 :(得分:5)
像这样写:
<Route path='/:id_of_the_album' render={props => <Profile {...props} /> } />
现在在Profile
组件内,它应该可以通过以下方式获得:
this.props.match.params.id_of_the_album
答案 1 :(得分:1)
在react路由器中,当您从一个组件路由到另一个组件时,您将拥有一个对象match
,其中包含许多属性。其中一个是params
,它可以帮助我们确定是否有任何参数通过路径传递给子组件。
在您的情况下,您可以在子组件中使用match.params.id_of_the_album
This link提供有关反应路由器的更多信息。