title: How to put a div inside a Switch with React Router?
body: <p>I have an APP using React and Redux, and I wanted to load a <code>NotFound</code> component when the user enters an invalid route. I found online a way to solve that problem, that is by putting all the routes inside a switch, including the <code>NotFound</code> component.</p>
  <p>The problem is that, in my app, I can't put all my routes inside a Switch because There is a single component that needs to be stretched to the entire page, while all the other components need to be inside a &quot;container&quot;. The way I have it below (see the code), the <code>NotFound</code> component works for all cases, except when I'm on the &quot;landing&quot; component route (where the <code>NotFound</code> component always displays).</p>
  <p>I tried to put the landing component inside the <code>Switch</code> with the &quot;container&quot; div but the app crashes.</p>
  <p>Is there any way to solve this? (keeping the landing component out of the container, and the other components inside)</p>
  <pre><code>class App extends Component {
    render() {
      return (
        &lt;Provider store={store}&gt;
          &lt;Router&gt;
            &lt;div className=&quot;App&quot;&gt;
              &lt;Navbar /&gt;
              &lt;Route exact path=&quot;/&quot; component={Landing} /&gt;
              &lt;div className=&quot;container&quot;&gt;
                &lt;Switch&gt;
                  &lt;Route exact path=&quot;/register&quot; component={Register} /&gt;
                  &lt;Route exact path=&quot;/login&quot; component={Login} /&gt;
                  &lt;Route exact path=&quot;/profiles&quot; component={Profiles} /&gt;
                  &lt;Route exact path=&quot;/profile/:handle&quot; component={Profile} /&gt;
                  &lt;PrivateRoute exact path=&quot;/dashboard&quot; component={Dashboard} /&gt;
                  &lt;PrivateRoute
                    exact
                    path=&quot;/create-profile&quot;
                    component={CreateProfile}
                  /&gt;
                  &lt;PrivateRoute
                    exact
                    path=&quot;/edit-profile&quot;
                    component={EditProfile}
                  /&gt;
                  &lt;PrivateRoute
                    exact
                    path=&quot;/add-experience&quot;
                    component={AddExperience}
                  /&gt;
                  &lt;PrivateRoute
                    exact
                    path=&quot;/add-education&quot;
                    component={AddEducation}
                  /&gt;
                  &lt;PrivateRoute
                    exact
                    path=&quot;/edit-education/:id&quot;
                    component={EditEducation}
                  /&gt;
                  &lt;PrivateRoute exact path=&quot;/feed&quot; component={Posts} /&gt;
                  &lt;PrivateRoute exact path=&quot;/post/:id&quot; component={Post} /&gt;
                  &lt;Route component={NotFound}/&gt;
                &lt;/Switch&gt;
              &lt;/div&gt;
              &lt;Footer /&gt;
            &lt;/div&gt;
          &lt;/Router&gt;
        &lt;/Provider&gt;
      );
    }
  }
  </code></pre>