FILES

When I access this URL http://localhost:8081/edit/01 with built-in navigation of react-router, it works fine. Route is <Route path="/edit/:id/" ponent={EditExpensePage} />.

But when I put the same URL directly in the browser, I get following two lines of error in console and page doesn't render anything.

Errors

GET http://localhost:8081/edit/bundle.js net::ERR_ABORTED
GET http://localhost:8081/edit/bundle.js 404 (Not Found)

I will be thankful for the help.

FILES https://github./microcyberz/expensify

When I access this URL http://localhost:8081/edit/01 with built-in navigation of react-router, it works fine. Route is <Route path="/edit/:id/" ponent={EditExpensePage} />.

But when I put the same URL directly in the browser, I get following two lines of error in console and page doesn't render anything.

Errors

GET http://localhost:8081/edit/bundle.js net::ERR_ABORTED
GET http://localhost:8081/edit/bundle.js 404 (Not Found)

I will be thankful for the help.

• javascript
• reactjs
• react-router

3 Answers 3

Here's your problem:

https://github./microcyberz/expensify/blob/master/public/index.html#L13

You're loading the bundle.js relative to the current path, in stead of absolute from the root. Change this to /bundle.js and you're good to go.

In your example, the js is loaded relative to the current url, resolving from /edit/123 to /edit/bundle.js

This is happening because your server is not redirecting to the index file. I mean what's behind http://localhost:8081? Is it node? Are you sure that every single request is handled the same way?

Also you may check how you include your bundle.js. Is the path relative like ./assets/js/bundle.js or absolute like /assets/js/bundle.js? Should be absolute.

This problem will also appear when using webpack and the HtmlWebpackPlugin. It can be solved by using the publicPath config option, which will prepend each script tag with a /:

//webpack.config.js
{
...
  plugins: [
    new HtmlWepbackPlugin({
      ...
      publicPath: '/'
    })
  ]
}