Могу ли я передавать данные с одной страницы на другую как состояние, используя каталог приложений Nextjs 13?

Question

Используя маршрутизатор приложений Nextjs 13, я хочу передать просмотр данных из MainComponent.jsx в Preview.jsx в качестве состояния . не через запрос или реквизит. Я просто хочу передать данные как состояние из MainComponent.jsx и перейти к Result.jsx, получить данные состояния и отобразить их в компоненте результата . Возможно ли это, или есть ли лучший подход к решению этой проблемы?

Моя структура папок

      -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;

Answer 1

окей, вам нужно использовать перехватчик useContext и создать внешнее состояние для вашего приложения. Я пытаюсь сказать, что создайте новый файл в каталоге приложения, создайте контекст и передайте ему значения, а затем оберните им компонент макета следующим образом: предположим, что ваше новое имя файла — store.jsx.

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

Затем в файле макета.jsx

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

это приведет к тому, что я создам общее состояние для вашего приложения, а затем, где бы вы ни захотели его вызвать, вам просто нужно использовать хук useContext на этой странице, и ваше состояние можно будет легко получить, не потеряв. попробуй