使用Nextjs 13 App Router,我想将previewData从MainComponent.jsx传递到Preview.jsx,作为State。而不是通过查询或 prop 。我只想从MainComponent.jsx传递数据作为状态,然后导航到Result.jsx接收状态数据并在ResultComponent中显示。这是可能的,或者有更好的方法来解决这个问题吗?
我的文件夹结构
-App
-maincomponent
-page.jsx
-result
-page.jsx
字符串
MainComponent.jsx
"use client";
import { useRouter } from "next/navigation";
const MainComponent = () => {
const router = useRouter();
const { id } = router.query;
const imageData = images.find((image) => image.id === parseInt(id));
let previewData = null;
if (imageData) {
previewData = {
id: imageData.id,
title: imageData.title,
imageUrl: imageData.imageUrl,
};
}
return (
<div>
{previewData ? (
<div>
<h1>{previewData.title}</h1>
</div>
) : (
<div>
<p>Loading...</p>
</div>
)}
</div>
);
};
export default MainComponent;
型
结果.jsx
import { useRouter } from "next/navigation";
const Result = () => {
return (
<div>
Display the Preview Data Here as A state
</div>
);
};
export default Result;
型
1条答案
按热度按时间1dkrff031#
你需要做的是使用useContext钩子并为你的应用程序创建一个外部状态。我想说的是,在app目录中创建一个新文件,并创建一个上下文并向其传递值,然后像这样 Package 布局组件:假设您新文件名是store.jsx
字符串
然后在layout.jsx文件中
型
这将做的是,我将创建一个通用的状态,在你的应用程序,然后无论你想调用它,你只需要在该页面中使用useContext钩子,你的状态可以很容易地访问,而不会丢失。给予看