title: Lazy loading doesn't work when using react-router-dom
body: <p><strong>Tried every possible solution available on the web. Please Help.</strong> <br/></p>
  <ol>
  <li>Ran <code>npm run eject</code></li>
  <li>Edited package.json file and tried the recommended solution of adding the below code as per <a href="https://reactrouter.com/web/guides/code-splitting" rel="nofollow noreferrer">https://reactrouter.com/web/guides/code-splitting</a>. <br/></li>
  </ol>
  <pre><code>  &quot;babel&quot;: {
      &quot;presets&quot;: [
        &quot;@babel/preset-react&quot;
      ],
      &quot;plugins&quot;: [
        &quot;@babel/plugin-syntax-dynamic-import&quot;
      ]
    }
  </code></pre>
  <p>Below is my code where I use lazy loading. Only the root route (&quot;/&quot;) gets loaded. Nothing is loaded when I visit <strong>localhost:3000/auth</strong></p>
  <p><a href="https://i.stack.imgur.com/Y2fO3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y2fO3.png" alt="enter image description here" /></a></p>
  <pre><code>import React, { useEffect, Suspense } from 'react';
  import { connect } from 'react-redux';
  import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
  
  import Layout from './components/Layout/Layout';
  import Logout from './containers/Auth/Logout/Logout';
  import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder';
  import * as actions from './store/actions/index';
  
  const Checkout = React.lazy(() =&gt; import('./containers/Checkout/Checkout'));
  const Orders = React.lazy(() =&gt; import('./containers/Orders/Orders'));
  const Auth = React.lazy(() =&gt; import('./containers/Auth/Auth'));
  
  const App = (props) =&gt; {
    useEffect(() =&gt; {
      props.onTryAutoSignup();
    }, []);
  
    let routes = (
      &lt;Switch&gt;
        &lt;Route
          path=&quot;/auth&quot;
          render={(props) =&gt; {
            &lt;Auth {...props} /&gt;;
          }}
        /&gt;
        &lt;Route path=&quot;/&quot; exact component={BurgerBuilder} /&gt;
        &lt;Redirect to=&quot;/&quot; /&gt;
      &lt;/Switch&gt;
    );
    if (props.isAuthenticated) {
      routes = (
        &lt;Switch&gt;
          &lt;Route path=&quot;/checkout&quot; render={(props) =&gt; &lt;Checkout {...props} /&gt;} /&gt;
          &lt;Route path=&quot;/orders&quot; render={(props) =&gt; &lt;Orders {...props} /&gt;} /&gt;
          &lt;Route path=&quot;/logout&quot; component={Logout} /&gt;
          &lt;Route path=&quot;/auth&quot; render={(props) =&gt; &lt;Auth {...props} /&gt;} /&gt;
          &lt;Route path=&quot;/&quot; exact component={BurgerBuilder} /&gt;
          &lt;Redirect to=&quot;/&quot; /&gt;
        &lt;/Switch&gt;
      );
    }
    return (
      &lt;div&gt;
        &lt;Layout&gt;
          &lt;Suspense fallback={&lt;p&gt;Loading...&lt;/p&gt;}&gt;{routes}&lt;/Suspense&gt;
        &lt;/Layout&gt;
      &lt;/div&gt;
    );
  };
  
  const mapStateToProps = (state) =&gt; {
    return {
      isAuthenticated: state.auth.token !== null,
    };
  };
  
  const mapDispatchToProps = (dispatch) =&gt; {
    return {
      onTryAutoSignup: () =&gt; dispatch(actions.authCheckState()),
    };
  };
  
  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));
  
  </code></pre>
  <p><strong>My package.json file <a href="https://pastebin.com/iHMKAGwp" rel="nofollow noreferrer">package.json</a></strong> <br/>
  <strong>My webpack config file <a href="https://pastebin.com/3VTK4M0E" rel="nofollow noreferrer">webpack.config.js</a></strong></p>