You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Based on the provided reproduction, when i click on the "User" link, it goes through Layout and User components. User changes state in context (which wraps the whole router) and it breaks the behaviour of navigate in Layout which is called 1s after rendering (it doesn't do anything).
...
exportdefaultfunctionApp(){const[state,setState]=useState(false);return(<Ctx.Providervalue={{ state, setState }}><Router/></Ctx.Provider>);}constLayout=()=>{constnavigate=useNavigate();const{ id }=useParams();useEffect(()=>{(async()=>{awaitnewPromise((resolve)=>setTimeout(resolve,1000));// only url changesnavigate(`/users/${id}/other`);})();},[]);return<Outlet/>;};constUser=()=>{const{ setState }=useContext(Ctx);useEffect(()=>{// this is called before `navigate` in `Layout`setState(true);},[]);return<>User</>;};
...
When i comment setState or assign navigate to useRef everything works correctly.
Expected Behavior
After clicking on the link and waiting 1s, the route /users/${id}/other should render correctly.
Actual Behavior
After clicking on the link and waiting 1s, the url changes to /users/${id}/other but I still see /users/${id}.
The text was updated successfully, but these errors were encountered:
Our case might be different from yours, because we only encounter such problem when reloading the page.
Turns out there is an check in the library that the navigate cannot be used until the history listener is being wired up.
What version of React Router are you using?
6.21.3
Steps to Reproduce
Based on the provided reproduction, when i click on the "User" link, it goes through
Layout
andUser
components.User
changes state in context (which wraps the whole router) and it breaks the behaviour ofnavigate
inLayout
which is called 1s after rendering (it doesn't do anything).https://codesandbox.io/p/devbox/6q36k2 (contains below fragment of code)
When i comment
setState
or assignnavigate
touseRef
everything works correctly.Expected Behavior
After clicking on the link and waiting 1s, the route
/users/${id}/other
should render correctly.Actual Behavior
After clicking on the link and waiting 1s, the url changes to
/users/${id}/other
but I still see/users/${id}
.The text was updated successfully, but these errors were encountered: