title: SolidJS Router useNavigate() throws: Error: Make sure your app is wrapped in a <Router />
body: <p>Even though my App is wrapped in a Router tag, when I use <code>useNavigate()</code> or the <code>&lt;Navigate /&gt;</code> element I get the same error <code>login.tsx:27 Error: Make sure your app is wrapped in a &lt;Router /&gt;</code></p>
  <p>Here is my index.tsx</p>
  <pre><code>/* @refresh reload */
  import { render } from 'solid-js/web';
  
  import './index.css';
  import App from './App';
  import { Router } from 'solid-app-router';
  
  render(
      () =&gt; (
          &lt;Router&gt;
              &lt;App /&gt;
          &lt;/Router&gt;
      ),
      document.getElementById('root') as HTMLElement
  )
  
  </code></pre>
  <p>App.tsx</p>
  <pre><code>const App: Component = () =&gt; {
      return (
          &lt;&gt;
              &lt;Routes&gt;
                  &lt;Route path=&quot;/&quot; component={Landing} /&gt;
                  &lt;Route path=&quot;/dashboard&quot; component={Dashboard} /&gt;
              &lt;/Routes&gt;
          &lt;/&gt;
      )
  }
  </code></pre>
  <p>the landing component that is the parent of the Login component</p>
  <pre><code>import { useNavigate } from 'solid-app-router'
  import { Component, createSignal, Show, onMount } from 'solid-js'
  import { getIsValidSession } from '../services/session'
  import '../styling/landing.css'
  import CreateAccount from './landing/create-account'
  import Login from './landing/login'
  
  const Landing: Component = () =&gt; {
      const [displayLogin, setDisplayLogin] = createSignal(true)
  
      return (
          &lt;div class=&quot;landing text-center&quot;&gt;
              &lt;main class=&quot;form-signin&quot;&gt;
                  &lt;img
                      class=&quot;mb-4&quot;
                      src=&quot;src/assets/original/tracker-image.png&quot;
                      alt=&quot;&quot;
                      width=&quot;72&quot;
                      height=&quot;85&quot;
                  /&gt;
                  &lt;Show when={displayLogin()} fallback={&lt;CreateAccount /&gt;}&gt;
                      &lt;Login /&gt;
                  &lt;/Show&gt;
  
                  &lt;Show
                      when={displayLogin()}
                      fallback={
                          &lt;button
                              class=&quot;w-100 btn btn-lg btn-primary mt-3&quot;
                              onClick={toggleDisplay}&gt;
                              Login Existing User
                          &lt;/button&gt;
                      }&gt;
                      &lt;button
                          class=&quot;w-100 btn btn-lg btn-primary mt-3&quot;
                          onClick={toggleDisplay}&gt;
                          Create Account
                      &lt;/button&gt;
                  &lt;/Show&gt;
              &lt;/main&gt;
          &lt;/div&gt;
      )
  }
  
  export default Landing
  
  </code></pre>
  <p>and the Login component</p>
  <pre><code>import { useNavigate } from 'solid-app-router'
  import { Component, createSignal } from 'solid-js'
  import Response from '../../models/response'
  import { PostSession, Session } from '../../models/session'
  import * as session from '../../services/session'
  
  const Login: Component = () =&gt; {
      const [email, setEmail] = createSignal('')
      const [password, setPassword] = createSignal('')
  
      const login = async (event: any) =&gt; {
          event.preventDefault()
          try {
              console.log(`Login: ${email()}, Password: ${password()}`)
              const res = await session.login({
                  email: email(),
                  password: password(),
              } as PostSession)
  
              if (res.status !== 200) {
                  window.alert('Login failed')
              } else {
                  const navigate = useNavigate()
                  navigate('/dashboard', { replace: true })
              }
          } catch (error) {
              console.error(error)
          }
      }
  
      return (
          &lt;form&gt;
              &lt;h1 class=&quot;h3 mb-3 fw-normal&quot;&gt;Please sign in&lt;/h1&gt;
  
              &lt;div class=&quot;form-floating&quot;&gt;
                  &lt;input
                      type=&quot;email&quot;
                      class=&quot;form-control&quot;
                      id=&quot;floatingInput&quot;
                      placeholder=&quot;name@example.com&quot;
                      value={email()}
                      onChange={(e: any) =&gt; setEmail(e.target.value)}
                  /&gt;
                  &lt;label for=&quot;floatingInput&quot;&gt;Email address&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-floating&quot;&gt;
                  &lt;input
                      type=&quot;password&quot;
                      class=&quot;form-control&quot;
                      id=&quot;floatingPassword&quot;
                      placeholder=&quot;Password&quot;
                      value={password()}
                      onChange={(e: any) =&gt; setPassword(e.target.value)}
                  /&gt;
                  &lt;label for=&quot;floatingPassword&quot;&gt;Password&lt;/label&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;checkbox mb-3&quot;&gt;
                  &lt;label&gt;
                      &lt;input type=&quot;checkbox&quot; value=&quot;remember-me&quot; /&gt; Remember me
                  &lt;/label&gt;
              &lt;/div&gt;
              &lt;button
                  class=&quot;w-100 btn btn-lg btn-primary&quot;
                  onClick={e =&gt; login(e)}&gt;
                  Sign in
              &lt;/button&gt;
          &lt;/form&gt;
      )
  }
  
  export default Login
  
  </code></pre>
  <p>What is the correct way to setup the Router for my use case?</p>