CODEWITHSUNDEEP
reactjsreact-router
Kocur4d
Kocur4d

Reputation: 6921

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:

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.

Upvotes: 6

Views: 2130

Answers (2)

Hamed Lohi
Hamed Lohi

Reputation: 621

my problem was solved by adding historyApiFallback: true in webpack.config devServer section and <base href="/"> in the head

<!DOCTYPE html>
 <html>
  <head>
   <base href="/">

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link
     rel="stylesheet"
     type="text/css"
     href="fonts/font-awesome/css/font-awesome.css"
    />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top" >
   <div id="root"></div>
   <script type="text/javascript" src="js/jquery.1.11.1.js"></script>
   <script type="text/javascript" src="js/bootstrap.js"></script>
  </body>

 </html>

In this project, I used external resources such as bootstrap and some styles that were added in the head tag, as well as javascript files in the index.html file, but instead of this way it is better to add them in package.json and Imported in components.

Upvotes: 1

topheman
topheman

Reputation: 7902

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

Upvotes: 6

Related Questions