Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

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

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

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs