NextJs 鏈接到另一個頁面，然后使用：react-scroll 滾動

Question

我正在使用 react Next js Link 元素：

import Link from 'next/link';

還有我的應用程序中的一些按鈕在單擊時滾動到一個元素：

import { Link } from 'react-scroll';

https://www.npmjs.com/package/react-scroll

兩者都可以很好地分開，但是我有一個將 go 鏈接到另一頁的鏈接，我想在之后滾動：鏈接應該像這樣工作：

1. 如果用戶在該鏈接應該鏈接到的頁面上 - 它應該只滾動到元素。
2. 如果用戶在任何其他頁面上，則鏈接應更改頁面，然后滾動到元素。

如何捕獲頁面更改並知道是否單擊了此鏈接然后滾動？ 或者有什么其他方法可以解決？

Answer 1

我是這樣做的：

索引.js

當 redux 的 state (scrollToElement) 發生變化時，滾動到元素

import {useDispatch, useSelector} from "react-redux"
import {  Element, scroller }from 'react-scroll'
import {ScrollToElement} from "../src/redux/actions/actions"

const dispatch = useDispatch()
const {scrollToElement} = useSelector(state=>state.app)

useEffect(()=>{
   if (scrollToElement){
     scroller.scrollTo(scrollToElement, {
       duration: 800,
       delay: 0,
       smooth: 'easeInOutQuart'
     })
     dispatch(ScrollToElement(null))
   }

},[scrollToElement])

return (
<Element name="YOUR_DIV_NAME" className="element">
<div>SCROLL HERE</div>
</Element>
)

菜單.js

通過鏈接並更改 redux 狀態

import { useDispatch } from "react-redux"
import Link from "next/link"

const dispatch = useDispatch()

return (
<Link scroll={false} href="/" >
<li onClick={()=>dispatch(ScrollToElement("YOUR_DIV_NAME"))}>
<a>
Scroll!!
</a>
</li >
</Link>
)

動作.js

export const ScrollToElement = (string) =>{
return  dispatch=>{
    dispatch({type:scrollToElement,payload:string})
}}

AppReducer.js

const initialState = {
scrollToElement:null
}
export const appReducer = ( state = initialState,action ) =>{
switch (action.type){
    case scrollToElement:{
        return {
            ...state,
            scrollToElement: action.payload
        }
    }
   }

Answer 2

我用查詢參數和useEffect()解決了它

/post/index.tsx

import { useEffect } from 'react';

import type { NextPage } from 'next';
import { useRouter } from 'next/router';
import * as Scroll from 'react-scroll';

const { Element: ScrollElement } = Scroll;

const Post: NextPage = () => {
  const { query } = useRouter();

  useEffect(() => {
    if (query.id === 'targetElement') {
      setTimeout(() => {
        Scroll.scroller.scrollTo('targetElement', {
          duration: 300,
          smooth: true,
          offset: -100,
        });
      }, 100);
    }
  }, [query]);

  return (
    <>
      <ScrollElement
        id="targetElement"
        name="targetElement"
      >
        Target Element
      </ScrollElement>
    </>
  );
};

export default Post;

例子.tsx

<Link
  href={{
    pathname: '/post',
    query: { id: 'targetElement' },
  }}
>
  <a>To Target Element</a>
</Link>
)}