时间戳

首页 > 解决方案 > 在 nextjs 中将道具从一个页面传递到另一个页面

javascript - 在 nextjs 中将道具从一个页面传递到另一个页面

问题描述

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

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

export default Test1;

这是我的 test2 页面

import React from 'react';

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


export default Test2;

标签： javascriptreactjsnext.jsreact-propsnextjs-dynamic-routing

解决方案

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

推荐阅读