URL navigation resets context but button navigation does not

  Kiến thức lập trình

I have a Next.js application that is currently on version 13 but was written in version 12. There is no server side rendering taking place in the application. The file structure looks like the following:

frontend-next/
├─ pages/
│  ├─ _app.js
│  ├─ index.js
│  ├─ places/
│  │  ├─ index.js
│  ├─ people/
│  │  ├─ index.js

The _app.js file looks like this (imports not included for brevity):

function App({Component, pageProps: {session, ...pageProps}}) {

    return (
        <SessionProvider session={session}>
            <Authorization>
                <UserContext>
                    <Layout>
                        <Component {...pageProps} />
                    </Layout>
                </UserContext>
            </Authorization>
        </SessionProvider>
    )
}

export default App

The Authorization component is not a provider but simply checks to see if a user is signed in and redirects them to the right page or to the IAM solution.

The application lands on the places/index.js page. When I navigate to people/index.js from places/index.js using the URL, the application throws an error that the user object that should be provided by the UserContext is undefined. However when I navigate using a button the application does not throw that error.

I have Googled and checked with Gemini but Gemini is insistent that navigating via URL does not unmount the context.

So why is this happening?

LEAVE A COMMENT