如何通过Next.js Router.push传递组件初始状态？

看起来你已经把Recharts的点击事件绑定好了，核心问题就是在Next.js里跳转页面时传递不暴露在URL中的初始状态对吧？我给你几个实用的解决方案，从简单到复杂都有：

方法1：利用Next.js Router的state参数（最直接） #

你当前用的router.push其实支持第三个参数，用来传递不显示在URL中的状态——这个状态存在浏览器的history栈里，完全不会出现在地址栏，刚好符合你的需求。

修改你的changeURLView函数： #

const changeURLView = (data) => {
  const sID: string = data.payload.id;
  // 从数据里提取曲线的标识（比如用dataKey、name或者你业务里的区分字段）
  const curveIdentifier = properties.key; // 这里根据你的实际数据结构调整，比如也可以用data.payload[properties.dataKey]
  router.push(
    '/p/[pID]/s/[sID]',
    router.asPath + `/s/${sID}`,
    { 
      state: { initialCurveState: curveIdentifier } // 把曲线状态存在state里
    }
  );
}

在目标组件中读取状态： #

如果是Pages Router（Next.js 12及更早，或者你用的是pages目录），直接用useRouter钩子读取：

import { useRouter } from 'next/router';
import { useState } from 'react';

const TargetComponent = () => {
  const router = useRouter();
  // 从router.state里获取传递的初始状态，加个默认值防止undefined
  const initialCurve = router.state?.initialCurveState || 'curve1';

  // 用这个值初始化组件状态
  const [currentCurve, setCurrentCurve] = useState(initialCurve);

  return (
    // 你的组件内容
  );
}

如果是App Router（Next.js 13+，app目录），因为App Router的useRouter没有直接暴露state，我们可以从window.history里读取：

import { useEffect, useState } from 'react';

const TargetComponent = () => {
  const [currentCurve, setCurrentCurve] = useState('curve1');

  useEffect(() => {
    // 从history状态里取出我们传递的值
    const initialCurve = window.history.state?.initialCurveState;
    if (initialCurve) {
      setCurrentCurve(initialCurve);
    }
  }, []);

  return (
    // 你的组件内容
  );
}

小提醒：这种方法的状态只存在当前history会话里，如果用户刷新页面，state会丢失——如果需要刷新后还能保留，就需要结合下面的方法。

方法2：全局状态管理（适合复杂场景） #

如果你的应用有很多跨页面、跨组件的状态传递需求，用全局状态管理会更省心。这里推荐几个方案：React Context API（轻量无依赖）、Zustand（极简状态库）或者Redux Toolkit（大型应用首选）。

举个React Context的简单例子： #

1. 先创建一个CurveContext：

// contexts/CurveContext.tsx
import { createContext, useContext, useState, ReactNode } from 'react';

type CurveContextType = {
  initialCurveState: string | null;
  setInitialCurveState: (state: string) => void;
};

const CurveContext = createContext<CurveContextType | undefined>(undefined);

export const CurveProvider = ({ children }: { children: ReactNode }) => {
  const [initialCurveState, setInitialCurveState] = useState<string | null>(null);

  return (
    <CurveContext.Provider value={{ initialCurveState, setInitialCurveState }}>
      {children}
    </CurveContext.Provider>
  );
};

export const useCurveContext = () => {
  const context = useContext(CurveContext);
  if (!context) {
    throw new Error('useCurveContext必须在CurveProvider内部使用');
  }
  return context;
};

2. 在根组件中包裹你的应用：

• Pages Router：修改_app.tsx

import { CurveProvider } from '../contexts/CurveContext';

function MyApp({ Component, pageProps }) {
  return (
    <CurveProvider>
      <Component {...pageProps} />
    </CurveProvider>
  );
}

export default MyApp;

• App Router：修改layout.tsx

import { CurveProvider } from './contexts/CurveContext';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <CurveProvider>{children}</CurveProvider>
      </body>
    </html>
  );
}

3. 在点击事件中设置全局状态：

const changeURLView = (data) => {
  const { setInitialCurveState } = useCurveContext();
  const curveIdentifier = properties.key; // 你的曲线标识
  setInitialCurveState(curveIdentifier);
  
  const sID: string = data.payload.id;
  router.push(
    '/p/[pID]/s/[sID]',
    router.asPath + `/s/${sID}`
  );
}

4. 在目标组件中读取状态：

const TargetComponent = () => {
  const { initialCurveState } = useCurveContext();
  const [currentCurve, setCurrentCurve] = useState(initialCurveState || 'curve1');

  // 可选：读取后清空全局状态，避免下次进入页面时复用旧值
  useEffect(() => {
    const { setInitialCurveState } = useCurveContext();
    return () => setInitialCurveState(null);
  }, []);

  return (
    // 你的组件内容
  );
}

这种方法的好处是状态可以在任意组件间共享，而且如果需要持久化，还可以结合localStorage保存状态。

方法3：结合LocalStorage（解决刷新丢失问题） #

如果需要用户刷新页面后仍能保留初始状态，可以把状态存在localStorage里：

修改点击事件： #

const changeURLView = (data) => {
  const sID: string = data.payload.id;
  const curveIdentifier = properties.key;
  // 把状态存在localStorage
  localStorage.setItem('initialCurveState', curveIdentifier);
  
  router.push(
    '/p/[pID]/s/[sID]',
    router.asPath + `/s/${sID}`
  );
}

目标组件读取状态： #

const TargetComponent = () => {
  // 初始化时从localStorage读取，没有的话用默认值
  const [currentCurve, setCurrentCurve] = useState(() => {
    return localStorage.getItem('initialCurveState') || 'curve1';
  });

  // 读取后删除localStorage，避免下次进入页面时拿到旧状态
  useEffect(() => {
    localStorage.removeItem('initialCurveState');
  }, []);

  return (
    // 你的组件内容
  );
}

注意：localStorage是持久化的，所以一定要记得读取后删除，否则用户下次进入页面会自动填充上次的状态，可能不符合预期。

总结一下：

• 只是简单的页面跳转传状态？选方法1，最直接零依赖；
• 有复杂的跨组件状态需求？选方法2，扩展性更强；
• 需要刷新后仍保留状态？选方法3，或者方法1+localStorage结合使用。

内容的提问来源于stack exchange，提问作者Fowad