使用SPA上的React-Router从列表项更改为列出详细信息组件

Question

我有一个单页应用程序，我在ajax调用后在页面右侧呈现了列表项。

我希望能够单击各个列表项并获取列表组件（TrackList）的列表详细信息页面（AlbumList）。但是，当我单击列表项时，它会显示正确的路径和轨道ID，但没有任何反应。

class App extends React.Component {

  constructor(){
    super();
    this.state = store.getState();
  }

  componentDidMount(){
    store.subscribe(() => this.setState(store.getState()))
  }

  ajaxCall(cityname, pagenumber) {
    $.ajax({
      url: `#`,
      dataType: 'jsonp'
    })
    .done((data) => {    
      let mappedArray = data.message.body.track_list.map((x) =>{
        return {
          trackId: x.track.track_id,
          trackName: x.track.track_name,
          artistName: x.track.artist_name
        }
      })

      const action = {type: 'CHANGE_TRACK_LIST', list: mappedArray}
      store.dispatch(action);

    });
  }

    render(){
      return(
        <Router>
          <div>
            <Maps changeList={this.ajaxCall} pageNumber={this.state.pageNumber}/>
            <div className="list-result-container">
            <TrackList list={this.state.artists} changePage={this.ajaxCall}/>
            </div>
            <Route path='/track' component={TrackList}/>
            <Route path='/track/:id' component={AlbumList}/>
          </div>
        </Router>
      );
    }
  }


ReactDOM.render((
  <App />
), document.getElementById('root')
);

在TrackList组件中 -

let items = this.props.list.map(x => {
  return(
      <Link to={`/track/${x.trackId}`}>
      <li key={x.trackId} className="artist-items">
      "{x.trackName}"<br />
      <span className="artist-name">by {x.artistName}</span>
      </li>
      </Link>

    );