Menu
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.
615
when you make a bigger change in your code, you may have to refresh the browser or restart the server (stop the server and re-reun the npm start command). This is typical, and to be expected.
React Native solves this problem for the developers. Hot reloading allows you to see the changes that you have made in the code without reloading your entire app. Whenever you make any changes, all you need to do is save your code.
Hot Restart takes much higher time than Hot reload. Hot Reload does not work when Enumerated types are changed to regular Classes and when classes are changed to enumerated types. Hot Reload is useful because it saves time by just implementing the functionality based on the closest build class in less than 10secs.
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
153
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.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
