检查用户访问nextjs中的Url

Question

我想检查是否是第一次访问该页面的功能运行否则不是运行

例如：

用户第一次打开网站主页显示条件是必须运行用户访问/about页面后about页面也是第一次条件运行此用户再次返回后home page 主页被访问条件不是运行这次我怎样才能在 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 />}

这种情况只是运行当用户第一次访问该页面时。

Answer 1

我自己没有试过，但你可以试试这样的将访问过的路径保存在localStorage或每个Component的cookie中

主页组件

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组件

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>
    </>
  );
};

如果我们在customHook中实现这个功能就更好了

检查用户访问nextjs中的Url

Check User Visit the Url in nextjs

javascript

jsx

reactjs

next.js

next-router