steelRat steelRat - 1 year ago 86
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} />

Main component:

<div className="main-conteiner">

<Genres />


Genres component do this:

let genres = this.state.genres;

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

I have list of genres here: enter image description here

Then i click some genre, i got adress:


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


Some clicks and i can got this:


My server configuration:

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

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

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download