时间戳

首页 > 解决方案 > 如何使用 Next.js Router.push 传递初始状态？

javascript - 如何使用 Next.js Router.push 传递初始状态？

问题描述

我有一个onClick事件处理程序，当单击图表上的数据点时触发。图上有两条曲线，根据单击的曲线，我希望子组件设置初始状态。例如，单击curve1并将其设置为下一个组件中的初始状态，对于curve2.

使用我在道具中使用处理程序recharts渲染几个Line组件：onClickactiveDot

<Line
    name={properties.prettyName}
    isAnimationActive={true}
    activeDot={{
        onClick: (data) =>
            changeURLView(data)
    }}
    type="linear"
    key={properties.key}
    dataKey={properties.dataKey}
    stroke={properties.color}
/>

和changeURLViewScan处理程序：

const changeURLView = (data) => {
// I can check which curve the datapoint belongs to here
        const sID: string = data.payload.id
        

        router.push(
            '/p/[pID]/s/[sID]',
            router.asPath + `/s/${sID}`
        )
    }

React Router 有一个generatePath功能可以让你将 props 传递给下一个组件，但是我看不到 Next.js 可以实现这一点。

Next/Router确实允许您传递查询参数，但我不希望在 URL 中使用它。我希望能够单击曲线并根据单击的曲线填充下一个组件的初始状态。我也许可以拥有一个道具initialCurveState并以这种方式设置组件状态，但问题仍然存在 - 如何使用 Next.js 传递道具或设置初始状态？

标签： javascriptreactjsnext.jsrecharts

解决方案

推荐阅读