Ucodia Ucodia - 1 year ago 64
React JSX Question

React nested route fails to load on refresh

I have a React app with navigation powered by

that I run in development with
and the history fallback option enabled. Here is the routes I have defined in my

<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRedirect to="/intro" />
<Route path="/intro" component={Intro} />
<Route path="/device" component={Device} />
<Route path="/clothing" component={Clothing} />
<Route path="/build" component={Build}>
<IndexRedirect to="/build/pattern" />
<Route path="/build/pattern" component={Pattern} />
<Route path="/build/layout" component={Layout} />
<Route path="/build/color" component={Color} />
<Route path="/capture" component={Capture} />
<Route path="/review" component={Review} />
), document.getElementById('app'))

When I navigate through links, everything works fine and I can see the nested route components nesting within their parent route components as expected. For example when I navigate to
I can see my
component nesting the
component nesting the

Where it fails is when I try to hit the refresh button within the nested route. React entirely fails to load and I get the following error

GET http://localhost:8080/build/app.js 404 (Not Found)

There is indeed not such a file in my app but I am still confused as of why it is automatically looking for this file instead of reloading the route from the root. Note that hitting refresh on pages like
does work without an issue.

Let me know if you need more details about my setup.

Answer Source

It doesn't work because it can't load your javascript bundle. I'm guessing that the problem is with your path in script tag in HTML. Probably you have specified the path to app.js with dot at the beginning like this one <script src="./app.js"></script>, if this is true please remove dot and check if the problem still exists <script src="/app.js"></script>

Let's illustrate what is the difference between ./app.js and /app.js

Case 1. You are loading page using first level of routes like / or /intro

  • ./app.js: HTML tries to load script from http://address/app.js
  • /app.js: HTML tries to load script from http://address/app.js

No difference

Case 2. You are loading page using second level of routes /build/pattern

  • ./app.js: HTML tries to load script from http://address/build/app.js - doesn't exist
  • /app.js: HTML tries to load script from http://address/app.js - OK
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download