我可以使用Nextjs13App目录将数据从一个页面传递到另一个页面吗

nhaq1z21  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(149)

使用Nextjs 13 App Router,我想将previewDataMainComponent.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;

1dkrff03

1dkrff031#

你需要做的是使用useContext钩子并为你的应用程序创建一个外部状态。我想说的是,在app目录中创建一个新文件,并创建一个上下文并向其传递值,然后像这样 Package 布局组件:假设您新文件名是store.jsx

const yourContext = createContext();
const Store = ({children}) =>{
 <yourContext.Provider values={{yourvalues}}>
    {children}
 </yourContext.Provider>
}
export default Store;

字符串
然后在layout.jsx文件中

import Store from "./store";
export default function RootLayout({children}){
return <Store> {children} </Store> }


这将做的是,我将创建一个通用的状态,在你的应用程序,然后无论你想调用它,你只需要在该页面中使用useContext钩子,你的状态可以很容易地访问,而不会丢失。给予看

相关问题