1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37import { Link, Outlet, createRootRouteWithContext } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { QueryClient } from '@tanstack/react-query'
import Footer from '../components/Footer'
export const Route = createRootRouteWithContext<{queryClient: QueryClient}>()({
component: RootComponent
})
const linkOptions = {
activeProps: {"aria-current": true },
activeOptions: {exact: true}
}
function RootComponent() {
return (
<>
<header>
<nav aria-label="Main">
<ul>
<li><Link to="/audits" {...linkOptions}>Audits</Link></li>
<li><Link to="/pages" {...linkOptions}>Pages</Link></li>
<li><Link to="/logs" {...linkOptions}>Logs</Link></li>
<li><Link to="/account" {...linkOptions}>Account</Link></li>
</ul>
</nav>
</header>
<Outlet />
<Footer />
<ReactQueryDevtools buttonPosition="top-right" />
<TanStackRouterDevtools position="bottom-right" />
</>
)
}