steelRat steelRat - 11 days ago 6
React JSX Question

browser history and wrong adress

I have a routing:

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


Main component:

<div className="main-conteiner">

<Genres />
{this.props.children}

</div>


Genres component do this:

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>
)


I have list of genres here: enter image description here

Then i click some genre, i got adress:

http://localhost:8080/genres/28


Its good, that work. If i click again, i got this:

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


Some clicks and i can got this:

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


My server configuration:

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


Hash history doesn't work. What i do wrong?

Answer

Your Link isn't set properly. It should be:

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

because you want it to be relative to the root, not the current path.