title: React js: Error: useLocation() may be used only in the context of a <Router> component
body: <p>im using react router v6 and i every time i use initializing for authentication in my main file it shows this error. i cant find a solution in the internet for it. i want to render some routes only when there is a user but now it doesnt render anything.</p>
  <p>AuthNavigator
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React, { useState, useEffect } from 'react';
  import app from './firebase';
  import { Router, Routes, Route } from 'react-router-dom';
  
  import AuthStack from './stacks/AuthStack';
  import AppStack from './stacks/AppStack';
  import StaticStack from './stacks/StaticStack';
  
  function AuthNavigator() {
    const [initializing, setInitializing] = useState(true);
    const [user, setUser] = useState(() =&gt; app.auth().currentUser);
  
    useEffect(() =&gt; {
      const unsubscribe = app.auth().onAuthStateChanged((user) =&gt; {
        if (user) {
          setUser(user);
        } else {
          setUser(null);
        }
        if (initializing) {
          setInitializing(false);
        }
      });
  
      // cleanup subscription
      return unsubscribe;
    }, []);
  
    if (initializing) return 'Loading....';
  
    return (
      &lt;Router&gt;
        &lt;Routes&gt;
          &lt;Route path="*" element={&lt;StaticStack /&gt;} /&gt;
          &lt;Route path="auth/*" element={&lt;AuthStack user={user} /&gt;} /&gt;
          &lt;Route path="app/*" element={&lt;AppStack user={user} /&gt;} /&gt;
        &lt;/Routes&gt;
      &lt;/Router&gt;
    );
  }
  export default AuthNavigator;</code></pre>
  </div>
  </div>
  </p>
  <p>App.js</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React from 'react';
  import './App.css';
  import AuthNavigator from './AuthNavigator';
  import { Router } from 'react-router-dom';
  
  function App() {
    return (
      &lt;Router&gt;
        &lt;AuthNavigator /&gt;
      &lt;/Router&gt;
    );
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>