Need help in solid-router

{
  "@solidjs/router": "^0.10.5",
  "solid-js": "^1.8.7"
}

/* @refresh reload */
import { render } from 'solid-js/web'
import Layout from './layout'

import './index.css'

const root = document.getElementById('root')

render(() => <Layout />, root!)

import { For } from 'solid-js/web';
import less from './layout.module.less'
import { Router, useNavigate } from '@solidjs/router'

import { routes } from './routers/router'; // a route array with lazy comps used

export default function Layout() {

  const menuRoute = [
    {
      name: '首页',
      link: '/'
    },
    {
      name: 'axum',
      link: '/axum'
    }
  ]

  const linkTo = (path: string) => {

    // error here:  "Make sure your app is wrapped in a <Router />"
    const $router = useNavigate(); 

    return () => {
      console.log(path)
      // $router(path)
    }
  }

  return (
    <div class={less.flex}>
      <ul class={less.l}>
        <For each={menuRoute}>{(r, i) =>
          <li onclick={linkTo(r.link)}>{r.name}</li>
        }</For>
      </ul>
      <div class={less.r}>
        <Router>{routes}</Router>
      </div>
    </div>
  )
}