I have created a NextJs app router to achieve the routes as follows:
/chat/conversation_id->/chat/newor/chat= Open in full main layout/chat/conversation_id/history->/chat/new/historyor/chat/id/history= Open in the – side drawer along with chat/chat/conversation_id/files->/chat/new/filesor/chat/id/files= Open in the side drawer along with chat/chat/conversation_id/<etc>= Open such routes in the side drawer along with chat/settings= Open in full main layout
In the app router added the chat section as a slot and history and files as routable through the children in layout. With this when navigated to /chat/conversation_id/history the side drawer is opening. On soft navigating back to /chat/conversation_id the side drawer still shows the content of history. but on the hard navigation history drawer closes.
The layout file code: chat/[conversationId]/layout.tsx
<code>export default function ChatLayout({
children,
chatbot
}: Readonly<{
children: React.ReactNode
chatbot: React.ReactNode
}>) {
// console.log("children", children)
return (
<div className="flex h-full flex-row">
{children}
<div className="flex-1">{chatbot}</div>
</div>
)
}
</code>
<code>export default function ChatLayout({
children,
chatbot
}: Readonly<{
children: React.ReactNode
chatbot: React.ReactNode
}>) {
// console.log("children", children)
return (
<div className="flex h-full flex-row">
{children}
<div className="flex-1">{chatbot}</div>
</div>
)
}
</code>
export default function ChatLayout({
children,
chatbot
}: Readonly<{
children: React.ReactNode
chatbot: React.ReactNode
}>) {
// console.log("children", children)
return (
<div className="flex h-full flex-row">
{children}
<div className="flex-1">{chatbot}</div>
</div>
)
}
Even have tried to hide children as chat/[conversationId]/default.tsx return null
Questions:
- Can something like this be achievable in an app router, If achievable please share samples or do I have to do a side drawer in the chat page and toggle the side drawer with query params?
- Can new chat be routed to
/chatinstead of/chat/new. This I was doing because I can`t have empty before the history path/chat/<empty>/history? - At the start of the chat I am trying to replace the path with
/chat/idbut if did so the page redirects or renders. Can we do a soft change of the URL without redirecting or re-rendering?
I was able to get this working.
Answers:
- I have updated the
chat/[conversationId]/layout.tsxto check the pathname if history or files are not in the path name hiding the children.
Code:
<code>'use client'
import { usePathname } from 'next/navigation'
export default function ChatLayout({
children,
chatbot
}: Readonly<{
children: React.ReactNode
chatbot: React.ReactNode
}>) {
const pathname = usePathname()
const showDrawer = pathname.includes('history') || pathname.includes('files')
return (
<div className="flex h-full flex-row">
{showDrawer && <div>{children}</div>}
<div className="flex-1">{chatbot}</div>
</div>
)
}
</code>
<code>'use client'
import { usePathname } from 'next/navigation'
export default function ChatLayout({
children,
chatbot
}: Readonly<{
children: React.ReactNode
chatbot: React.ReactNode
}>) {
const pathname = usePathname()
const showDrawer = pathname.includes('history') || pathname.includes('files')
return (
<div className="flex h-full flex-row">
{showDrawer && <div>{children}</div>}
<div className="flex-1">{chatbot}</div>
</div>
)
}
</code>
'use client'
import { usePathname } from 'next/navigation'
export default function ChatLayout({
children,
chatbot
}: Readonly<{
children: React.ReactNode
chatbot: React.ReactNode
}>) {
const pathname = usePathname()
const showDrawer = pathname.includes('history') || pathname.includes('files')
return (
<div className="flex h-full flex-row">
{showDrawer && <div>{children}</div>}
<div className="flex-1">{chatbot}</div>
</div>
)
}
- This can be done by having the same routes under /chat as well as /chat/[conversationId]. But I am skipping this, I do conditional rendering with
/chat/newand/chat/id - I am using browser native API
window.history.pushStateto do shallow routing. NextJS doc reference
you can use (history) in the directory because then the app will not understand your router
=>
<code>--- chat
--------[convesationId]
------------ ...
------------ (history)
----------------page.tsx
</code>
<code>--- chat
--------[convesationId]
------------ ...
------------ (history)
----------------page.tsx
</code>
--- chat
--------[convesationId]
------------ ...
------------ (history)
----------------page.tsx
….
enter link description here
New contributor
Beer Baby is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1