ReactJs cannot acess nested route

Question

I have an issue using nested routes with react-router.

Here is my code (two simple react components, routes file to access comp1/comp2) :

House.js

export default connect(st => st)(class House extends React.Component {
 render() {
  return (
   <div>       
    {this.props.children}
   </div>
  );
 }
})

Window.js

export default connect(st => st)(class Window extends React.Component {
  render() {
    return (
      <div >
        hey hey
      </div>
    );
  }
})

routes.js

export const routes = (
  <Router history={ history }>
    <Route path="/house" component={House}>
      <Route path="/house/window" component={Window} />
   </Route>
 </Router>
);

When I redirect to "/house/window" programmatically, I can access the route and the page shows "hey hey". If I want to access the url directly : localhost:8080/house/window

It shows a blank page and a console error :

Request URL:http://localhost:8080/house/window Request Method:GET Status Code:304 Not Modified

And then : GET http:// localhost:8080 /house/js/bundle.js (404)

Also, http:// localhost:8080 /house/ (with trailing slash) shows the same error.

I really don't understand this weird redirection http:// localhost:8080 /house/js/bundle.js

I'm probably doing something wrong, but after crawling stackoverflow, I still can't see it.

score 1 · Answer 1 · answered Jun 07 '16 at 08:52

1

I found the issue : my bundle.js script included in index.html was included with a relative path 'js/bundle.js' so I changed it for '/js/bundle.js'.

Sadly, it didn't make any problem until I wanted to nest some routes.

answered Jun 07 '16 at 08:52

Gulle

23
5

Manish Jangir · Answer 2 · 2016-06-07T08:10:42.797

0

Nested routes cannot have parent path included in path attribute:

export const routes = (
  <Router history={ history }>
    <Route path="/house/" component={House}>
      <Route path="window" component={Window} />
   </Route>
 </Router>
);

edited Jun 07 '16 at 08:10

answered Jun 07 '16 at 08:07

Manish Jangir

5,329
4
42
75

I have the same issue nesting this way and trying to access /house/window, but I can access /window . – Gulle Jun 07 '16 at 08:10
Have you enabled hotmodule reloading or restarted server? BTW I've updated my answer. – Manish Jangir Jun 07 '16 at 08:11
Thanks, the updated answer doesn't work either for me. I'm only using webpack --watch and npm start to work locally – Gulle Jun 07 '16 at 08:15
And still have the same issue after restarting the server – Gulle Jun 07 '16 at 08:25
I found the issue : my bundle.js script included in index.html was included with a relative path 'js/bundle.js' so I changed it for '/js/bundle.js'. – Gulle Jun 07 '16 at 08:50

ReactJs cannot acess nested route

2 Answers2