瀏覽器歷史記錄和錯誤的地址

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 

哈希歷史不起作用。我做錯了什麼？

Answer 1

您的Link設置不正確。它應該是：

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

因爲您希望它是相對於根，而不是當前路徑。