So here i am trying to use the intercepting route to make the similar behavior as nextgram.

I got following directory structure:

- app/:
- (withOutHeader)/:
- books/
- [id]:
- page.tsx
- @modal:
- books/
- [id]/
- page.tsx

and @modal/books/[id]/page.tsx and books/[id]/page.tsx both are
export default function BookModal({ params }): JSX.Element {
return <h1>{params.id}</h1>;
}

Now i put the <Link href="/books/blah">Book Thumb</Link> in app/dash/page.tsx file. But this showing error page saying Application error: a client-side exception has occurred (see the browser console for more information).

in the console it throws an error:

apply-router-state-patch-to-tree.js:15 Uncaught TypeError: initialTree is not iterable
    at applyPatch (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/router-reducer/apply-router-state-patch-to-tree.js:15:53)
    at applyRouterStatePatchToTree (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/router-reducer/apply-router-state-patch-to-tree.js:70:30)
    at navigateReducer (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/router-reducer/reducers/navigate-reducer.js:202:84)
    at clientReducer (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/router-reducer/router-reducer.js:25:61)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/use-reducer-with-devtools.js:63:21)
    ...............