存储 next.js 路由历史记录

编程问答 2022-05-29

问题描述

我正在建立一个销售网站，我想在某些页面上为人们计时。很自然地，为了获取路由，我想使用 next/router useRouter asPath 并将其推送到上下文并在获取 keepalive 时提供服务。

我收集路由的策略是放置函数 changeRoutes，它是一个 appContext 公式，它将值推送到一个名为路由的应用上下文数组中，以存储在每个页面上加载的组件（导航栏）上的无依赖使用效果。>

最终发生的事情是当我加载和 console.log(routes) 时，我只会看到最近加载的路由，所以当我打开 /about 时，路由数组只显示 ["/about"] 和 "/ " 路由数组只显示 ["/"]。

我已经成功使用这种推送方法跟踪同一网站上的点击次数，所以请看图...

这是一些代码。

import { createContext,useContext } from 'react';

const AppContext = createContext();

export function AppWrapper({ children }) {
  let sharedState = {clicks:[],routes:[]}
  
  const addClick = (click)=>{ sharedState.clicks.push(click)}   
  const changeRoute = (route)=>{ sharedState.routes.push(route) }

  
  
  const contextProps = {changeRoute,addClick,sharedState}

  return (
    <AppContext.Provider value={contextProps}>
      {children}
    </AppContext.Provider>
  );
}

export function useAppContext() {
  return useContext(AppContext);
}

import Link from "next/link"
import {useState,useEffect} from "react"
import { useRouter } from "next/router"
import Image from 'next/image'
import {useAppContext} from "../contexts/state.js"



/*<Image
          onClick={onClick}
            src={style.background=== "black" ? "/logo2.png" : "/logo.png"}
            alt='Find Nationally Rated CPA Firms Near Me'
    
              width= "200px"
              height= "100px"
         
 
          />
*/
const StickyNavbar = () => {
  const [style,setStyle] = useState({});
let position
if (process.browser) {
  position = window.pageYOffset;
}

  const onClick = () => {
    if (process.browser) {  window.scrollTo(0,0)}
  
  };
 
const { asPath } = useRouter()
const appContext = useAppContext()
const {changeRoute,sharedState} = appContext




useEffect(() => {
    
  changeRoute(asPath)   
    
  },[]);

 ... the rest of the navbar

以下是我尝试过但没有奏效的一些方法。首先在导航栏上调用 useState 并将 asPath 更改为字符串，然后如果 useState null 更改触发推送。相同的结果。

与此类似的另一个问题中的功能示例要么是基于类的 js 要么是打字稿，因此将其组合到无状态功能下一个应用程序的基本上下文中，事实证明他们正在做的事情是不成功的。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptreactjsreactjsreactjsreactjsuse-context