title: How to fix error which appeared after upgrading to react-router v6
body: <p>Before upgrading to v6 I had this part of code, which worked as it should:</p>
  <pre><code>//before
  return (
          &lt;BrowserRouter&gt;
              &lt;Route render={(props) =&gt; (
                  &lt;div className={`layout ${themeReducer.mode}`}&gt;
                      &lt;Sidebar {...props}/&gt;
                      &lt;div className=&quot;layout__content&quot;&gt;
                          &lt;TopNav/&gt;
                          &lt;div className=&quot;layout__content-main&quot;&gt;
                              &lt;Switch&gt;
                                  &lt;Route path='/' exact component={Dashboard} /&gt;
                                  &lt;Route path='/activity' component={Activity} /&gt;
                              &lt;/Switch&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              )}/&gt;
          &lt;/BrowserRouter&gt;
      )
  </code></pre>
  <p>After upgrading I only changed <code>Switch</code> to <code>Routes</code> and <code>component</code> to <code>element</code> and expected it to work, but it didn't.</p>
  <pre><code>Error: A &lt;Route&gt; is only ever to be used as the child of &lt;Routes&gt; element, never rendered directly. Please wrap your &lt;Route&gt; in a &lt;Routes&gt;.
  </code></pre>
  <p>Tried many things, but nothing helped. How can I make it work the way it worked before the upgrading?</p>
  <pre><code>//after
  return (
          &lt;BrowserRouter&gt;
              &lt;Route render={(props) =&gt; (
                  &lt;div className={`layout ${themeReducer.mode}`}&gt;
                      &lt;Sidebar {...props}/&gt;
                      &lt;div className=&quot;layout__content&quot;&gt;
                          &lt;TopNav/&gt;
                          &lt;div className=&quot;layout__content-main&quot;&gt;
                              &lt;Routes&gt;
                                  &lt;Route path='/' element={&lt;Dashboard/&gt;} /&gt;
                                  &lt;Route path='/activity' element={&lt;Activity/&gt;} /&gt;
                              &lt;/Routes&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              )}/&gt;
          &lt;/BrowserRouter&gt;
      )
  </code></pre>