reactjs - 将 props 传递给组件，React Router V4

Question

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

App
   Header
   Main
     Searcher
     List_of_albums
       Album

所以，我的想法是，在主页上有一个专辑搜索器，它会在搜索后显示专辑列表。为此，我在组件 Main 中读取 .json 文件，然后将 props 传递给 List_of_albums 和 Album。

到目前为止一切正常。

现在我想通过按钮访问新 route 每个专辑的信息:/id_of_the_album。

此按钮在组件相册中进行了本地化，如下所示:

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

为此，我在组件应用程序中尝试了以下操作:

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>
    )
  }
}

其中 Profile 是显示专辑详细信息的新组件。 在这个新组件中，我想使用如下内容打开各个专辑的 json:

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

但是我如何将 id_of_the_album 传递到组件配置文件？

Answer 1

这样写:

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

现在在 Profile 组件中，它应该可以通过以下方式使用:

this.props.match.params.id_of_the_album