title: No routes matched location "/login" react router dom v6
body: <p>I am trying to organize the routes in `react-router-dom v6. And here is my flow:</p>
  <p><strong>root AppComponent</strong></p>
  <pre><code>function AppComponent() {
    return &lt;AppRoute /&gt;;
  }
  </code></pre>
  <p><strong>AppRoute.js (base routes)</strong></p>
  <pre><code>const AppRoute = () =&gt; {
    return (
      &lt;&gt;
        &lt;GuestRoute path=&quot;/login&quot; component={Login} /&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  <p><strong>GuestRoute</strong></p>
  <pre><code>const GuestRoute = ({ component: Component, ...rest }) =&gt; {
    return (
      &lt;GuestLayout&gt;
        &lt;Routes&gt;
          &lt;Route {...rest} element={&lt;Component /&gt;} /&gt;
        &lt;/Routes&gt;
      &lt;/GuestLayout&gt;
    );
  };
  </code></pre>
  <p><strong>GuestLayout</strong></p>
  <pre><code>const GuestLayout = ({ children, ...rest }) =&gt; {
    return (
          &lt;div&gt;
            {children}
          &lt;/div&gt;
    );
  };
  </code></pre>
  <p>But, when I go to <code>/login</code>, it is not breaking the page, but it is still showing a warning of <code>No routes matched location &quot;/login&quot;</code>. I am using <code>react-router-dom v6</code></p>