SolidJSS
SolidJS•2mo ago•
1 reply
Zach (MisutoRaccoon)

useNavigate() causing an error even though page/component is inside root layout?

Working on a menu system for my first SolidJS app and running into a bit of an issue! When I try to include useNavigate() in this menu component, I get an error thrown talking about how I can't use useNavigate() outside of the Router component.

Here's my root component, which is enabling/dealing with File-based routing through SolidStart:

import { Suspense } from 'solid-js'
import { Router } from '@solidjs/router'
import { FileRoutes } from '@solidjs/start/router'
import AppBar from './components/AppBar/AppBar'
import './app.css'

export default function App() {
  return (
    <>
      <AppBar />
      <div class="flex justify-center">
        <Router root={(props) => <Suspense>{props.children}</Suspense>}>
          <FileRoutes />
        </Router>
      </div>
    </>
  )
}


So, I see that the problem lies in that <AppBar /> is OUTSIDE the <Router /> component. The problem is that if I rearrange things and bring them inside, then I am faced with this error:

Hydration Mismatch. Unable to find DOM nodes for hydration key: 0000000000

This is from the following:
import { Suspense } from 'solid-js'
import { Router } from '@solidjs/router'
import { FileRoutes } from '@solidjs/start/router'
import AppBar from './components/AppBar/AppBar'
import './app.css'

export default function App() {
  return (
    <>
      <Router root={(props) => <Suspense>{props.children}</Suspense>}>
        <AppBar />
        <div class="flex justify-center">
          <FileRoutes />
        </div>
      </Router>
    </>
  )
}


So...not sure how I fix the hydration problem if I bring the AppBar inside the router...otherwise, what do I need to do in this situation to be able to use hooks such as useNavigate() ?

Thanks in advance!
Was this page helpful?