React router hot-reload not working

I have a small problem there are few similar questions on SA already but I can't figure out how to fix this. I am using react-router-redux but for this example I don't think there are any differences to using react-router

I have a simple setup:

<Router history={browserHistory}>
  <Route path="/">
    <IndexRoute component={ItemList}/> 
    <Route path='item/:uuid' component={Item}/> 
  <Route>
<Router>

I am using:

webpack
webpack-dev-server
html-webpack-plugin

When i visit localhost:8080 the IndexRoute is rendered. I can then press one of the items which has onClick={() => this.props.dispatch(routeActions.push('/item/' + item.uuid))} set. The history at this stage works fine I can go back and select another item and so on. But...

When I am on a item page for example localhost:8080/item/1234 and when I hit refresh I get:

404 not found - localhost:8080/item/bundle.js

This as well happens when I make some changes to the item page and hot reloading is rerendering it.

After going through few questions I can confirm that I have historyApiFallback: true and when I start the server it is reporting that 404s will fallback to /index.html

Update:

So when I hit refresh after being on localhost:8080/item/1234 chrome inspect say that was 200 response from server which looks like:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Damage Increased</title>
  </head>
  <body> 
    <script src="bundle.js"></script>
  </body>
</html>

And then it is 404 on http://localhost:8080/item/bundle.js

It looks like all the dev server stuff is working fine and the server indeed returns the index file but then the <script src="bundle.js"></script> is looking for a bundle.js file inside of the /item sub.

Instead of:

<script src="bundle.js"></script>

Do:

<script src="/bundle.js"></script>

Because when you access directly /item/1234, currently, you have a relative link to bundle.js so the browser will call /item/bundle.js.

If you're using html-webpack-plugin, you can add some rewrite rules to your dev-server (which you will have to add to your production one) - see more here

React router hot-reload not working

Related

Recent Posts