浏览器历史和错误的地址

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>

因为你希望它相对于根，而不是当前路径。