Question

0

19

Views

Check User Visit the Url in nextjs

I want to check the if visit the page first time the function run else not run

e.g.:

very first time user open the site HOME page show the condition is must run after the user visit /about page the about page also first time condition run after this user again back to the home page the home page is visited the condition is not run for this time how can I achieve this in next.js

import useScrollPosition from "/hooks/useScrollPosition";

const scrollPosition = useScrollPosition();
const [isShowComponents, setIsShowComponents] = useState(false);
useEffect(() => {
if (scrollPosition >= 100) {
  setIsShowComponents(true);
 }
}, [scrollPosition]);



{isShowComponents ? (
      <>
        <WorkWithUs />
        <Team />
        <FAQS />
      </>
    ) : <BaseSkeleton />}

This condition is just run when user very first time on the page.

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-03T21:42:40.091Z

I not tried it by my own but you can try something like this save the paths visited on localStorage or in cookies in each Component

Home Component

import {useLocation} from "react-router-dom"
import {useState,useEffect} from "react"
const scrollPosition = useScrollPosition();
const [isShowComponents, setIsShowComponents] = useState(false);

const Home = ()=>{
   const location =useLocation()
   const scrollPosition = useScrollPosition();
   const [path, setPath] = useLocalStorage("home","");
   

   useEffect(()=>{
    console.log(localStorage.getItem("home"))
      if(!localStorage.getItem("home")){
        localStorage.setItem("home",location.pathname)
      }else{
         setIsShowComponents(true);
      }   
   },[])
    useEffect(() => {
      if (scrollPosition >= 100 && !localStorage.getItem("home")) {
         setPath(localStorage.getItem("home"))
      }
    }, [scrollPosition]);
  return <h1>{path}</h1>
}

APP Component

const App = () => {

  return (
    <>
     <Router>
       <Routes>
         <Route exact path="/" element={<Home/>}/>
         <Route exact path="/about" element={<About/>}/>
         <Route exact path="/work" element={<Work/>}/>
         <Route exact path="/setting" element={<Setting/>}/>
       </Routes>
     </Router>
    </>
  );
};

This will be more Good if we will make this functionality in customHook