在 nextjs 中将属性从一个页面传递到另一个页面

Question

我有一个虚拟项目。在我的项目中，我有两个页面。（test1 和 test2）我想将一个道具从 page1 传递到 page2。我知道我可以使用 useRouter 钩子，但我不想将此道具设置为查询细绳。 在我的 test1 页面中，我有一个颜色变量。这是常量，并且有一个黄色值。我想在我的 page2 中使用此颜色作为道具（props.color） 这是我的 test1 页面

import React from 'react';
const Test1 = props => {
   const color='yellow';
    return (
        <div>
            test1
        </div>
    );
};

export default Test1;

这是我的测试2页面

import React from 'react';

const Test2 = props => {
    return (
        <div>
            Your color is {props.color}
        </div>
    );
};


export default Test2;

Answer 1

也许有太多的方法，但对我来说，我认为你可以使用localStorage。

示例：

//in your test1 
//foo is the key, bar is the value
localStorage.setItem("foo", "bar")

//in your test 2 you can get the bar by using foo key
const bar = localStorage.getItem("foo")

console.log(bar)// bar

这里有一个名为 useLocalStorage 的钩子，您可以使用它或自定义您自己的钩子。

Answer 2

Props 从父组件传递到其子组件。您要求的是在兄弟组件（即页面）之间传递道具，我认为这没有直接的方法。也许你可以尝试使用 React 的 Context API，这样你的 Test2 就不会使用任何硬编码值。

Answer 3

在Test1页面传递参数后，也可以使用

getInitialProps

获取第二页面的数据

传递参数

import Link from "next/link";

<Link href={{ pathname: '/test2', query: { color: 'yellow' } }}><a>test2</a></Link>

获取参数

const Test2 = ({color}) => {
    return (
        <div>
            Your color is {color}
        </div>
    );
};

Index.getInitialProps = async ({ query }) => {
  const {color} = query

  return {color}
}

希望这有帮助。