историю браузера и неправильный адрес

Question

У меня есть маршрутизация:

<Router history={browserHistory}> 
     <Route path='/' component={Main} > 
      <Route path='/genres' component={Genres} /> 
      <Route path='/genres/:id' component={GridMovies} /> 
    </Route> 
</Router> 

Главная компонент:

<div className="main-conteiner"> 

    <Genres />    
     {this.props.children} 

</div> 

Жанры компонент делают это:

let genres = this.state.genres; 

     return (
      <div className="genres-list"> 
       {genres.map(function(key) { 
        return <Link to={"genres/" + key['id']} className='genre'>{key['name']}</Link> 
       })} 
      </div> 
     ) 

У меня есть список жанров здесь:

Тогда я нажимаю некоторые жанр, я получил адрес:

http://localhost:8080/genres/28 

Его хорошо, что работа. Если я нажимаю еще раз, я получил это:

http://localhost:8080/genres/genres/28 

Некоторые щелчки и я могу получил это:

http://localhost:8080/genres/genres/genres/genres/genres/genres/genres/genres/genres/genres/genres/genres/18 

Моя конфигурация сервера:

webpack-dev-server --content-base public/ --history-api-fallback 

история Hash не работает. Что я делаю неправильно?

Answer 1

Ваш Link настроен неправильно. Это должно быть:

<Link to={"/genres/" + key['id']} className='genre'>{key['name']}</Link> 

потому что вы хотите, чтобы оно было относительно корня, а не текущего пути.