Understanding how nested routes work in react-router

Question

I am really struggling to understand how nested routes work with react-route. I have looked at many similar questions but I can't get things to work.

My goal is to have child components displayed inside their parent component and accessed accordingly with the corresponding url /parent/child.

I have this configuration:

<Router history={browserHistory}>

   <Router path="/" component={App}>

       <IndexRedirect to="/welcome" />

       <Route path="/welcome" component={WelcomePage} />

       <Route path="/services" component={ServiceView}>
            <Route path="new" component={AddServiceView} />
       </Route> 

   </Router>
</Router>

So I enter this url "/" in the browser, the WelcomePage (nested withing the App component) is correctly displayed. When I enter "/services", the ServiceView is correctly displayed (nested inside the App view). Here is a simplified layout of the ServiceView component:

<div>
     <Header>
        Services
     </Header>    
     {this.props.children}   
     <Footer />       
</div>

Now this is where I'm having my problem. When I enter this url "/services/new", I would expected the AddServiceView be displayed nested within its parent component where there is the {this.props.children}. Instead I get a blank page in my browser.

If in my routing configuration above, I change the path for AddServiceView from path="new" to path="/new"(notice the slash) and I hit this url "/new", then AddServiceView is correctly displayed, nested within its parent.

This confuses me. This url /new tends to indicate that the view displayed is located at the root of the application.

So my question is: why am I not able to display a child component nested within its parent through a nested url /parent/child (this follows the Routes layout), instead I am accessing this child component through this misleading url /child?

I hope that my question is clear. Thank you for your suggestions.

Notes: I am using using vscode + webpack + react + typescript. In some posts some people suggested there might be a problem with webpack and the way it works with react-router. But since I am new to webpack, I am not able to investigate their solution in my case.

Answer 1

For any one trying to have react-router nested routes work with webpack dev server, this github post gives the answer: basically use absolute paths in your index.html when you reference your .js files. For example use /bundle.js instead of bundle.js