distinguish between first page load and router <Link />?

Question

i have a route which renders an overlay modal. i want it to animate-in if i navigate from the UI, and be loaded as static when navigating from the address bar or after a refresh.

i use nodejs and react + react-router.

i thought about using my universal redux setup to match a state prop for this issue, but maybe there's a much more elegant solution

thanks!

Answer 1

This can be achieved by testing the prevPath property on the props.location object

const [isFirstLoad,setIsFirstLoad] = useState(false)
const {location} = props

useEffect(()=> {
    props.prevPath ? setIsFirstLoad(true) : setIsFirstLoad(false)
}, [location])

return <Modal animate={!isFirstLoad}/>

Each render UseEffect will test the props.location (similar to componentWillReceiveProps()) to check if the previous path is different. On load the prevPath property won't exist, so it will be false.