react-router v6: warning You should call navigate() in a React.useEffect #211
Description
Used RouteAdapter example:
https://github.com/pbeshai/use-query-params/blob/master/examples/react-router-6/src/index.js
#196 (comment)
My component code:
const MyComponent = () => { const [filter, setFilter] = useQueryParam('filter', ObjectParam); useEffect(() => { if (!filter) { { setFilter({ city: 'London' }); } }, [filter, setFilter]); Getting an error:
You should call navigate() in a React.useEffect(), not when your component is first rendered And redirect doesn't work.
Temporary solution
const MyComponent = () => { const [firstRenderDone, setFirstRenderDone] = useState(false); const [filter, setFilter] = useQueryParam('filter', ObjectParam); useEffect(() => { if (firstRenderDone && !filter) { { setFilter({ city: 'London' }); } }, [filter, firstRenderDone, setFilter]); useEffect(() => { setFirstRenderDone(true); }, []); How can I improve RouteAdapter to not implement firstRenderDone hack in every component I need redirect as soon as possible?