将道具传递给组件React Router V4

时间:2018-03-03 12:57:53

标签: reactjs react-router react-props

我有一个使用此组件树的应用程序:

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 ??

2 个答案:

答案 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提供有关反应路由器的更多信息。