CODEWITHSUNDEEP
javascriptreactjsreact-routernestedreact-router-dom
FreakyOne
FreakyOne

Reputation: 431

React router V4 / V5 / V6 nested routing 404 net::ERR_ABORTED 404,

I have tested everything described below with both react router V4 and V5. In V4 the error is just 404, but in V5 it also includes net::ERR_ABORTED.

I am creating a React app with React router. I need to have a /test route and /test/:param1/:param2 route.

First route is OK, but when I created the second and navigated the browser to localhost:8080/test/something/something2 I received a blank page with error in the console saying that it failed to GET localhost:8080/test/something/index.js.

I am using webpack and webpack-dev-server. I then tested more:

  1. Tried to put the second route inside the component of the first.
  2. Tried simplifying the route to /test/:param1, but that didn't work either.
  3. I then tried just a normal 1 level nested route /test/test2(no parameters) and still got the error in the title.

I have also configured a 404 page, however it is displayed only if the path is 1 level: /{something that does't exist}. If I navigate to /{something}/{something more} I get the same ERR_ABORTED.

For some unknown to me reason the browser tries to GET /test/index.js, which obviously doesn't exist.

I spent a day looking through articles, tutorials, and the react router documentation, but everywhere nested routes just work. In fact there is absolutely nothing about this error.

Edit1: After some more testing I've been able to narrow down the issue to just one question: How to configure react-router to always look for the bundle at {domain, localhost:port}/index.js?

Edit2: Tested it with the beta of V6 - same result.

Upvotes: 1

Views: 1540

Answers (2)

David Min
David Min

Reputation: 1454

Another is to check if you have in the Webpack config the following:

output: {publicPath: '/'},

Took me some time.

Upvotes: 7

FreakyOne
FreakyOne

Reputation: 431

After a few hours I finaly figured it out!! The mistake was so dumb. In my index.html file I required the bundle with <script src="./index.js"></script>. Simply removing the dot fixed the issue. If somebody has the same error, first check your index.html.

Upvotes: 1

Related Questions