useNavigate - navigate(path) throws "computations created outside a `createRoot`" and error

Sometimes (not 100% of the time) when a user selects a new category in the UI, the following code sends

computations created outside a
createRoot
createRoot
or
render
render
will never be disposed

and then

Uncaught (in promise) TypeError: Cannot read properties of null (reading '2')

const Home: Component = () => {
  const navigate = useNavigate()

  const setSelectedCategoryId = (id: string | undefined) => {
    const path = id || '/'
    navigate(path, { resolve: false })
  }

const Home: Component = () => {
  const navigate = useNavigate()

  const setSelectedCategoryId = (id: string | undefined) => {
    const path = id || '/'
    navigate(path, { resolve: false })
  }

I have check thoroughly, all the

createMemo

createMemo

and

creatEffect

creatEffect

are properly in Components and not in any async handlers or the like.

If I replace the

navigate

navigate

with

window.location.replace

window.location.replace

everything works fine, but of course, then my site reloads fresh every time too:

  const setSelectedCategoryId = (id: string | undefined) => {
    const path = id || '/'
    window.location.replace(path)
    // navigate(path, { resolve: true })
  }

  const setSelectedCategoryId = (id: string | undefined) => {
    const path = id || '/'
    window.location.replace(path)
    // navigate(path, { resolve: true })
  }

SolidJS•3y ago•

7 replies

Bersaelor

useNavigate - navigate(path) throws "computations created outside a `createRoot`" and error

Sometimes (not 100% of the time) when a user selects a new category in the UI, the following code sends

computations created outside a
createRoot
createRoot
or
render
render
will never be disposed

and then

Uncaught (in promise) TypeError: Cannot read properties of null (reading '2')

const Home: Component = () => {
  const navigate = useNavigate()

  const setSelectedCategoryId = (id: string | undefined) => {
    const path = id || '/'
    navigate(path, { resolve: false })
  }

const Home: Component = () => {
  const navigate = useNavigate()

  const setSelectedCategoryId = (id: string | undefined) => {
    const path = id || '/'
    navigate(path, { resolve: false })
  }

I have check thoroughly, all the

createMemo

createMemo

and

creatEffect

creatEffect

are properly in Components and not in any async handlers or the like.

If I replace the

navigate

navigate

with

window.location.replace

window.location.replace

everything works fine, but of course, then my site reloads fresh every time too:

  const setSelectedCategoryId = (id: string | undefined) => {
    const path = id || '/'
    window.location.replace(path)
    // navigate(path, { resolve: true })
  }

  const setSelectedCategoryId = (id: string | undefined) => {
    const path = id || '/'
    window.location.replace(path)
    // navigate(path, { resolve: true })
  }

useNavigate - navigate(path) throws "computations created outside a `createRoot`" and error

Similar Threads

useNavigate - navigate(path) throws "computations created outside a `createRoot`" and error

Similar Threads

Similar Threads

Similar Threads