#New modal feature bugged out

1 messages · Page 1 of 1 (latest)

wary trail
#

Following is the code I have in my layout.tsx:

<Link href="login">Login</Link>

When I click this, I get errors in my client.

Uncaught TypeError: flightRouterState is undefined
    applyRouterStatePatchToTree apply-router-state-patch-to-tree.js:52
    applyRouterStatePatchToTree apply-router-state-patch-to-tree.js:68
    navigateReducer navigate-reducer.js:56
    clientReducer router-reducer.js:19
    devToolReducer use-reducer-with-devtools.js:58
    updateReducer react-dom.development.js:10903
    useReducer react-dom.development.js:12198
    useReducer react.development.js:1761
    useReducerWithReduxDevtoolsImpl use-reducer-with-devtools.js:97
    Router app-router.js:64
    renderWithHooks react-dom.development.js:10398
    updateFunctionComponent react-dom.development.js:14912
    beginWork$1 react-dom.development.js:17066
    callCallback react-dom.development.js:19200
    invokeGuardedCallbackDev react-dom.development.js:19249
    invokeGuardedCallback react-dom.development.js:19313
    beginWork react-dom.development.js:25637
    performUnitOfWork react-dom.development.js:24465
    workLoopConcurrent react-dom.development.js:24451
    renderRootConcurrent react-dom.development.js:24407
    performConcurrentWorkOnRoot react-dom.development.js:23250
    workLoop index.js:10
    flushWork index.js:10
    performWorkUntilDeadline index.js:10
    853 index.js:10
    853 index.js:10
    __nccwpck_require__ index.js:19
    833 index.js:19
    __nccwpck_require__ index.js:19
    <anonymous> index.js:19
    <anonymous> index.js:19
    NextJS 4
    <anonymous> react-dom.development.js:27
    <anonymous> react-dom.development.js:35859
    NextJS 4
    <anonymous> index.js:37
    NextJS 4
    <anonymous> client.js:3
    NextJS 4
    <anonymous> app-index.js:9
    NextJS 4
    <anonymous> app-next-dev.js:5
    appBootstrap app-bootstrap.js:52
    loadScriptsInSequence app-bootstrap.js:18
    appBootstrap app-bootstrap.js:51
    <anonymous> app-next-dev
robust pendantBOT
#

Hi @wary trail. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

It seems like you're encountering an error with your <Link> component usage. Based on the information provided in the extracts, you should wrap the text "Login" with an <a> tag inside the <Link> component. Here's the corrected code:

import Link from 'next/link';

// ...

return (
  <Link href="/login">
    <a>Login</a>
  </Link>
);

For more information on using the <Link> component, refer to the Next.js documentation (https://beta.nextjs.org/docs/routing/linking-and-navigating).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@wary trail kapa.ai is still learning and improving, please let us how it did by reacting below

wary trail
#

@robust pendant The issue is with the new intercepting routes feature released. I am trying to open a modal in the page. My directory structure is as follows:

feed
├── @modal
│   └── (..)login
│       └── page.tsx
├── page.tsx
└── layout.tsx
login
└── page.tsx
robust pendantBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Based on the information provided in the extracts, the advanced routing patterns, including intercepting routes, are still under development and not yet supported in the current version of Next.js. You can find more information about the planned features in the Layouts RFC (https://nextjs.org/blog/layouts-rfc) and the App Router Roadmap (https://beta.nextjs.org/docs/app-directory-roadmap).

As of now, you might need to implement a custom solution for opening a modal within the page. You can use React state and conditional rendering to show or hide the modal based on user interactions.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Layouts RFC

Nested routes and layouts, client and server routing, React 18 features, and designed for Server Components.

#

@wary trail kapa.ai is still learning and improving, please let us how it did by reacting below

wary trail
#

@robust pendant intercepting routes has been released in Next.JS version 13.3

robust pendantBOT
#

Let me check the knowledge base for you. One moment! :books:

#

I apologize for the confusion earlier. Based on the extracts provided, I don't have enough information about the intercepting routes feature in Next.js 13.3.3. The extracts mainly discuss the planned features and the App Router Roadmap, but they don't provide specific implementation details for intercepting routes.

For more information on the latest Next.js features, I recommend checking the official Next.js documentation and release notes.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@wary trail kapa.ai is still learning and improving, please let us how it did by reacting below