[Bug]: navigate not working (not doing anything) when used inside useEffect

[XHCui]

What version of React Router are you using?

v6.19.0

React version: v18.2.0

Steps to Reproduce

The user will access the page with url like '..../place/claim?...'

and the page have following code:

useEffect(() => {
    const getProfile = async () => {
       // api call getting stuff
       
       navigate('/place', { replace: true })
    }
    
    getProfile()
}, [...])

However, the navigate never works here

tried following as well:

const [shouldNavigate, setShouldNavigate] = useState(false);

useEffect(() => {
    const getProfile = async () => {
       // api call getting stuff
       
       setShouldNavigate(true);
    }
    
    getProfile()
}, [...])

if (shouldNavigate) {
  return (<Navigate to='/place' replace={true} />)
}

also doesn't redirect

Expected Behavior

url redirect to the /place

Actual Behavior

Nothing happens

[nanianlisao]

Same bug, how to fix it？ @XHCui

[nanianlisao]

@brophdawg11 Can you help me? This problem occurs in data router. I checked a lot of PR related to this, such as #8929, but this problem still exists.