title: react with TS - useNavigate() with react-router-dom v6
body: <p>The App.tsx -</p>
  <pre><code>import React from 'react'; import { useNavigate } from 'react-router';
  
  import AppView from './App.view';
  
  interface Props { }
  
  const App: React.FC&lt;Props&gt; = (props: React.PropsWithChildren&lt;Props&gt;)
  =&gt; {   const navigate = useNavigate();   const isLoggedIn = sessionStorage.getItem('token');
  
    return (
        &lt;AppView
          isLoggedIn={isLoggedIn}
          navigate={navigate}
        &gt;&lt;/AppView&gt;   ); };
  
  App.displayName = 'App'; App.defaultProps = {};
  
  export default React.memo(App);
  </code></pre>
  <p>The App.view.tsx -</p>
  <pre><code>import React, { Suspense } from 'react';
  import { 
    Route,
    Routes,
    NavigateFunction,
    BrowserRouter,
  } from 'react-router-dom';
  
  const Login = React.lazy(() =&gt; import('./components/pages/Login/Login'));
  const Table = React.lazy(() =&gt; import('./components/pages/Table/Table'));
  
  interface Props {
    readonly isLoggedIn: string | null;
    readonly navigate: NavigateFunction;
  }
  
  const AppView: React.FC&lt;Props&gt; = (props: React.PropsWithChildren&lt;Props&gt;) =&gt; (
      &lt;Suspense fallback={null}&gt;
        &lt;BrowserRouter&gt;
          &lt;Routes&gt;
              &lt;Route path=&quot;/login&quot; element={&lt;Login /&gt;} /&gt;
              {props.isLoggedIn ? 
                &lt;Route path=&quot;/table&quot; element={&lt;Table /&gt;} /&gt; :
                props.navigate('/login', { replace: true })
              }
          &lt;/Routes&gt;
        &lt;/BrowserRouter&gt;
      &lt;/Suspense&gt;
  );
  
  AppView.displayName = 'AppView';
  AppView.defaultProps = {};
  
  export default React.memo(AppView);
  </code></pre>
  <p>The error -
  <code>Error: useNavigate() may be used only in the context of a &lt;Router&gt; component.</code></p>
  <p>Can't understand the problem. Tried to look at -
  <a href="https://typescript.tv/react/upgrade-to-react-router-v6/" rel="nofollow noreferrer">https://typescript.tv/react/upgrade-to-react-router-v6/</a></p>
  <p>My packege.json -</p>
  <pre><code>&quot;react&quot;: &quot;^17.0.2&quot;,
  &quot;react-dom&quot;: &quot;^17.0.2&quot;,
  &quot;react-router-dom&quot;: &quot;^6.0.2&quot;,
  </code></pre>
  <p>devDependencies -</p>
  <pre><code>&quot;@types/react&quot;: &quot;^17.0.36&quot;,
  &quot;@types/react-dom&quot;: &quot;^17.0.11&quot;,
  &quot;@types/react-router-dom&quot;: &quot;^5.3.2&quot;
  </code></pre>
  <p>I would like to navigate to /table only when isLoggenIn === true</p>