SolidJS•3mo ago•

1 reply

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

💙Beginner

Possible Bug🇹TypeScript

SolidStart

Working on a menu system for my first SolidJS app and running into a bit of an issue! When I try to include

useNavigate()

useNavigate()

in this menu component, I get an error thrown talking about how I can't use

useNavigate()

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>
    </>
  )
}

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 />

<AppBar />

is OUTSIDE the

<Router />

<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

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>
    </>
  )
}

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()

useNavigate()

?

Thanks in advance!

SolidJS•3mo ago•

1 reply

Zach (MisutoRaccoon)

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

💙Beginner

Possible Bug🇹TypeScript

SolidStart

Working on a menu system for my first SolidJS app and running into a bit of an issue! When I try to include

useNavigate()

useNavigate()

in this menu component, I get an error thrown talking about how I can't use

useNavigate()

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>
    </>
  )
}

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 />

<AppBar />

is OUTSIDE the

<Router />

<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

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>
    </>
  )
}

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()

useNavigate()

?

Thanks in advance!

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

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

Similar Threads

Similar Threads

Similar Threads