检查用户访问nextjs中的Url

Question

我想检查是否在函数首次运行时访问页面，否则不运行

例如：

用户第一次打开网站主页显示条件是必须在用户访问/关于页面后运行关于页面也是第一次条件是在该用户再次返回主页后运行主页访问该条件是不运行的我如何在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或每个组件中的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中实现此功能，效果会更好