title: React Router v4 nested routes
body: <p>Fist of all React Router is very confusing to me for the following reasons. If others feel the same way, this may be useful for them or if they dont feel otherwise, their answer would be helpful to me :)</p>
  
  <p>1) What is the standard way of using react router V4</p>
  
  <ul>
  <li>using Switch? is this even good in V4?</li>
  <li>using <a href="https://reacttraining.com/react-router/web/example/route-config" rel="nofollow noreferrer">Route config</a> in one js file as collection?</li>
  <li>using route specified in the <a href="https://reacttraining.com/react-router/web/example/recursive-paths" rel="nofollow noreferrer">parent component</a>? </li>
  </ul>
  
  <p>2) If my applications has multiple big modules, How can I specify routes based on modules and combine them in the root index file? is this even a right approach to starts with?</p>
  
  <p>I have my route config written this way, <strong>how can I configure notfound(404) logic If I have my route config in this fashion, I want it to redirect to homepage if no route found.</strong></p>
  
  <pre><code>const routes = [
  {
      path: '/',
      component: Layout,
      routes: [{
          path: '/users',
          component: Users,
          exact: true
      }, {
          path: '/users/:id',
          component: ViewUser
      }, {
          path: '/addUser',
          component: AddUser
      }
      ]
  }, { component: Layout }
  ];
  
  const RouteWithSubRoutes = (route) =&gt; (
    &lt;Route path={route.path} exact={route.exact} render={props =&gt; (
      &lt;route.component {...props} routes={route.routes} /&gt;
      )} /&gt;
  );
  
  export const renderChildren = (childRoutes) =&gt; {
      if (childRoutes) {
          return childRoutes.map((route, i) =&gt; {
              return &lt;RouteWithSubRoutes key={i} {...route} /&gt;;
          });
      }
  };
  
  export const RouteConfig = () =&gt; {
      return (
        &lt;Router&gt;
          &lt;div&gt;
            {renderChildren(routes)}
          &lt;/div&gt;
        &lt;/Router&gt;
      );
  };
  </code></pre>