title: Lazy loaded React router routes loading anyway
body: <p>I've been trying to lazy load routes in React using React.lazy and Suspense. But some components are loading regardless of the current route, exactly: Feed, Profile and Settings.</p>
  <p>Notice I don't actually want to lazy load Components like MenuAppBar and SnackAlert but if I import them normally and remove their Suspense, code-splitting straight doesn't even work and everything loads and the whole app is just a single chunk.</p>
  <p><img src="https://i.stack.imgur.com/a3gNw.jpg" alt="" /></p>
  <pre><code>import {createMuiTheme, MuiThemeProvider} from &quot;@material-ui/core&quot;;
  import {yellow} from &quot;@material-ui/core/colors&quot;;
  import CssBaseline from &quot;@material-ui/core/CssBaseline&quot;;
  import axios from &quot;axios&quot;;
  import React, {lazy, Suspense, useEffect, useState} from &quot;react&quot;;
  import {BrowserRouter as Router, Route, Switch} from &quot;react-router-dom&quot;;
  import &quot;./css/feed.css&quot;;
  import &quot;./css/style.css&quot;;
  
  const Feed = lazy(() =&gt; import(&quot;./routes/Feed&quot;));
  const Profile = lazy(() =&gt; import(&quot;./routes/Profile&quot;));
  const Home = lazy(() =&gt; import(&quot;./routes/Home&quot;));
  const Settings = lazy(() =&gt; import(&quot;./routes/Settings&quot;));
  const NotFound = lazy(() =&gt; import(&quot;./routes/NotFound&quot;));
  const MenuAppBar = lazy(() =&gt; import(&quot;./components/MenuAppBar&quot;));
  const SnackAlert = lazy(() =&gt; import(&quot;./components/SnackAlert&quot;));
  
  const App: React.FC = () =&gt; {
      const [isLogged, setIsLogged] = useState(localStorage.getItem(&quot;token&quot;) ? true : false);
  
      const [user, setUser] = useState&lt;User&gt;(
          isLogged ? JSON.parse(localStorage.getItem(&quot;userInfo&quot;) as string) : {admin: false}
      );
      const [openError, setOpenError] = useState&lt;boolean&gt;(false);
      const [errorMsg, setErrorMsg] = useState&lt;string&gt;(&quot;&quot;);
      const [severity, setSeverity] = useState&lt;Severity&gt;(undefined);
      const [pwa, setPwa] = useState&lt;any&gt;(null);
      const [showBtn, setShowBtn] = useState&lt;boolean&gt;(false);
      const [isLight, setIsLight] = useState&lt;boolean&gt;(
          (JSON.parse(localStorage.getItem(&quot;theme&quot;) as string) as boolean) ? true : false
      );
  
      const theme: customTheme = {
          darkTheme: {
              palette: {
                  type: &quot;dark&quot;,
                  primary: {
                      main: yellow[600]
                  }
              }
          },
          lightTheme: {
              palette: {
                  type: &quot;light&quot;,
                  primary: {
                      main: yellow[700]
                  }
              }
          }
      };
  
      window.addEventListener(&quot;beforeinstallprompt&quot;, (event) =&gt; {
          event.preventDefault();
          setPwa(event);
          setShowBtn(true);
      });
  
      window.addEventListener(&quot;appinstalled&quot;, (e) =&gt; {
          setShowBtn(false);
          setErrorMsg(&quot;App installed!&quot;);
          setSeverity(&quot;success&quot;);
          setOpenError(true);
      });
  
      const handleClick = () =&gt; {
          if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
              setErrorMsg(`Please, open the share menu and select &quot;Add to Home Screen&quot;`);
              setSeverity(&quot;info&quot;);
              setOpenError(true);
          } else {
              if (pwa) {
                  pwa.prompt();
                  pwa.userChoice.then((choiceResult: {outcome: &quot;accepted&quot; | &quot;refused&quot;}) =&gt; {
                      if (choiceResult.outcome === &quot;accepted&quot;) {
                          setErrorMsg(&quot;App downloading in the background..&quot;);
                          setSeverity(&quot;info&quot;);
                          setOpenError(true);
                      }
                      setPwa(null);
                  });
              }
          }
      };
  
      useEffect(() =&gt; {
          const token: string | null = localStorage.getItem(&quot;token&quot;);
          let userInfo: User = JSON.parse(localStorage.getItem(&quot;userInfo&quot;) as string);
          if (userInfo &amp;&amp; token &amp;&amp; !userInfo.admin) {
              setUser(userInfo);
              setIsLogged(true);
          }
          if (isLogged) {
              axios
                  .get(&quot;/api/auth/user&quot;, {
                      headers: {
                          &quot;x-auth-token&quot;: `${token}`
                      }
                  })
                  .then((res) =&gt; {
                      if (!userInfo || !token) {
                          setUser(res.data as User);
                      }
                      localStorage.setItem(`userInfo`, JSON.stringify(res.data as User));
                      setIsLogged(true);
                  })
                  .catch((err) =&gt; {
                      if (err) {
                          setIsLogged(false);
                      }
                  });
          } else {
              localStorage.removeItem(&quot;token&quot;);
              localStorage.removeItem(&quot;userInfo&quot;);
          }
      }, [isLogged]);
  
      return (
          &lt;MuiThemeProvider theme={isLight ? createMuiTheme(theme.lightTheme) : createMuiTheme(theme.darkTheme)}&gt;
              &lt;CssBaseline /&gt;
              &lt;Router&gt;
                  &lt;Suspense fallback={&lt;div&gt;&lt;/div&gt;}&gt;
                      &lt;Route
                          path=&quot;/&quot;
                          render={() =&gt; (
                              &lt;&gt;
                                  &lt;MenuAppBar
                                      isLogged={isLogged}
                                      setIsLogged={setIsLogged}
                                      user={user}
                                      setUser={setUser}
                                      isLight={isLight}
                                      setIsLight={setIsLight}
                                  /&gt;
                                  &lt;SnackAlert severity={severity} errorMsg={errorMsg} setOpenError={setOpenError} openError={openError} /&gt;
                              &lt;/&gt;
                          )}
                      /&gt;
                  &lt;/Suspense&gt;
                  &lt;Suspense fallback={&lt;div&gt;&lt;/div&gt;}&gt;
                      &lt;Switch&gt;
                          &lt;Route exact path=&quot;/&quot; render={() =&gt; &lt;Home /&gt;} /&gt;
  
                          &lt;Route exact path=&quot;/profile/:id&quot; render={() =&gt; &lt;Profile /&gt;} /&gt;
  
                          &lt;Route exact path=&quot;/feed&quot; render={() =&gt; &lt;Feed isLogged={isLogged} user={user} /&gt;} /&gt;
  
                          &lt;Route
                              exact
                              path=&quot;/settings&quot;
                              render={() =&gt; (
                                  &lt;Settings isLight={isLight} setIsLight={setIsLight} handleClick={handleClick} showBtn={showBtn} /&gt;
                              )}
                          /&gt;
                          &lt;Route render={() =&gt; &lt;NotFound /&gt;} /&gt;
                      &lt;/Switch&gt;
                  &lt;/Suspense&gt;
              &lt;/Router&gt;
          &lt;/MuiThemeProvider&gt;
      );
  };
  
  export default App;
  </code></pre>