How should I be navigating? (Solved)

Get Help and Help Others
1

I don’t know what I am doing wrong

When I call navigate(’/’) (for instance) in my components I get this error:

Warning: Cannot update during an existing state transition (such as within render).

2

Hey @ajoslin103 do you have a bit more code to show where you are calling navigate('/') also this might be a better question to ask in the discord you might get a faster feedback loop

3

Thanks, here’s the page.

I was working on the business-registration so I just navigated there on app load

I know I could be doing a redirect, but this is the simplest reproducible

I like working on answers here because I fell like most newbies will search hear first :slight_smile: and then I can mark them solved with the answers that helped me

import { navigate } from '@redwoodjs/router'
const HomePage = () => {
  navigate('/register-business')
  return null
}
export default HomePage
4

Yeah I think the correct answer is to use the Redirect component. I would also recommend using redwoods named routes functions. Instead of hardcoding the routes.

import { Redirect, routes } from '@redwoodjs/router'

const SomePage = () => {
  return <Redirect to={routes.registerBusiness()}/>
}

I think the issue with what you are doing is you are redirecting using navigate in reacts lifecycle so it redirect before it even renders and returns null. I think if your really wanted to do it that way you would need to do it in a useEffect.

useEffect(() => { navigate('/register-business') }, [])

So essentially on mount navigate to the other page

2 Likes