I want to use hash-based routing in react-router-component, so I added the hash
attribute to the <Locations>
component like this:
<div id="page-wrapper">
<Locations hash>
<Location path="/" handler={HomePage} />
<Location path="/movies/" handler={MoviesPage} />
<Location path="/movies/:id" handler={MoviePage} />
</Locations>
</div>
I'm linking to this locations like this:
<li><Link href="/">Home</Link></li>
<li><Link href="/movies/">Movies</Link></li>
I also tried including the hashtags manually in the Link
component (I can't find it documented anyware how to link to a hash-based route).
<li><Link href="/#/">Home</Link></li>
<li><Link href="/#/movies/">Movies</Link></li>
The problem is that either way, react-router-component is not responding to clicks on the links. It is updating the url in the browser, but it is not switching to render the component defined as handler in the Location.
When I visit the url manually, e.g. http://localhost:8082/#/movies/, the correct component is being rendered, but again, I can still not navigate.
Also, if I remove the hash
attribute from the <Locations>
, linking to routes is working as expected again.