React Router - 单击列表项时更改组件

Question

我有艺术家名字的列表项目。我希望能够在点击任何艺术家名称时切换到我的“AlbumsList”组件。该路线还将保留艺术家ID。但是，当我点击时，没有任何反应。我在这里做错了什么？

const ArtistList = (props) => {

  // console.log(props.list);

  let items = props.list.map(x => {
    return(
        <Link to={`/albums/${x.artistId}`}>
        <li key={x.artistId} className="artist-items">{x.artistName}</li>
        </Link>
      );
  });

  return(
      <Router>
        <div>
          <ul>
            {items}
          </ul>
          <Route path="/albums/:id" Component={AlbumList}/>
        </div>
      </Router>
  );
}