Why activeClassName not actived

AlbumNav.jsx

  {this.props.albums.map(album => (
	<li key={`album-nav-${album.id}`}>
	  <Link
		to={`/albums/${album.id}`}
		activeClassName="active"
	  >
		{album.name} (<TotalPhotoInAlbum albumId={album.id} loadingText="?" />)
	  </Link>
	</li>
  ))}

Route.jsx

  <Route
    path="albums"
    getComponent={(nextState, cb) => {
      require.ensure([], require => {
        cb(null, require('./components/PageFrame/PageFrame').default);
      });
    }}
  >
    <IndexRoute
      getComponent={(nextState, cb) => {
        require.ensure([], require => {
          cb(null, require('./pages/AlbumList/AlbumList').default);
        });
      }}
    />
    <Route
      path="recent-add-product"
      getComponent={(nextState, cb) => {
        require.ensure([], require => {
          cb(null, require('./pages/RecentAddProduct/RecentAddProduct').default);
        });
      }}
    />
    <Route
      path=":albumId"
      getComponent={(nextState, cb) => {
        require.ensure([], require => {
          cb(null, require('./pages/AlbumPhotoList/AlbumPhotoList').default);
        });
      }}
    />
  </Route>