title: I'm having trouble with NextJs useRouter
body: <p>I'm having trouble with NextJs useRouter.</p>
  <p>I have a function to navigate between paths, and I use useRouter to do that, I wrote in a library that contains an array object:</p>
  <pre><code>router = useRouter()
  
  const actions = [
    {
    ...
      perform: (e) =&gt; router.push('/'),
    ...
    }
  ]
  </code></pre>
  <p>But it causes the error <code>TypeError: Cannot read properties of null (reading 'useContext')</code></p>
  <pre><code>  2 | import {useRouter} from 'next/router'
    3 | 
  &gt; 4 | const { router } = useRouter()
      |                            ^
    5 | 
    6 | const actions = [
    7 |   {
  </code></pre>
  <p>I imported this library to another component, this is what the <code>_app.js</code> looks like:</p>
  <pre><code>...
  &lt;div className={'webkit selection'+theme}&gt;
     &lt;CmdBar theme={theme}/&gt;  =&gt; this is where the library imported in
     &lt;Metatags description='null'/&gt;
     &lt;StyleReset/&gt;
     &lt;Component themeUse={themeUse.styles} theme={theme} {...pageProps} /&gt;
     &lt;Bar theme={theme} setTheme={setTheme} setThemeUse={setThemeUse} themeProvider={themeProvider}/&gt;
  &lt;/div&gt;
  ...
  </code></pre>
  <p>I have had this error the same as I used <code>useLocation</code> in React and React Router before because the components are outside the Route. I think it's the main causes of these.</p>
  <p><strong>Edited:</strong> It won't keep the same UI if I use anything that can refresh the page, so this is what I want to figure out.</p>
  <p>Thank you!</p>