title: React Router: How to render element on all routes, except one?
body: <p>I have HTML structure like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;nav&gt;
       &lt;!--navigation elements --&gt;
    &lt;/nav&gt;
    &lt;div className='main'&gt;
       &lt;!--other elements --&gt;
    &lt;/div&gt;
    &lt;div className='container'&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And routing defined like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;Router&gt;
    &lt;Fragment&gt;
      &lt;Navbar /&gt;
      &lt;Route exact path="/" component={Landing} /&gt;
      &lt;div className="container"&gt;
         &lt;Alert /&gt;
         &lt;Switch&gt;
             &lt;Route exact path="/register" component={Register} /&gt;
             &lt;Route exact path="/login" component={Login} /&gt;
             &lt;Route exact path="/profiles" component={Profiles} /&gt;
         &lt;/Switch&gt;
      &lt;/div&gt;
    &lt;/Fragment&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>The "container" element is present on all routes however I do not want it to be rendered on the "/" route. </p>
  
  <p>How can I stop <code>&lt;div className="container"&gt;</code> from being rendered on the <code>"/"</code> route? I want it to be rendered on all other routes except of <code>"/"</code>.</p>
  
  <p>A solution I found, but don't want to use is to explicitly insert the element with <code>class="container"</code> in each component that is rendered in my <code>&lt;Switch&gt;</code>. Is there a better way?</p>