#in page router

1 messages · Page 1 of 1 (latest)

lone acorn
#

how can i have a router inside a page, like i have a dashboard with tabs and i want to go to like "/dashboard/user" without actually changing the url but it changes the content

polar cosmosBOT
#

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

#

In Next.js, you can use the useRouter hook to programmatically change routes inside your components without changing the URL in the browser. This is particularly useful for scenarios like yours where you want to change the content of a page (like a dashboard) without changing the URL.

Here's an example of how you can use the useRouter hook:

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
 const router = useRouter()
 
 return (
 <button type="button" onClick={() => router.push('/dashboard')}>
 Dashboard
 </button>
 )
}

In this example, clicking the "Dashboard" button will navigate to the "/dashboard" route without changing the URL in the browser.

However, it's important to note that the useRouter hook should be used for navigation unless you have a specific requirement for using it. The recommended way to navigate between pages in Next.js is to use the <Link> component.

For more information on how to use the useRouter hook and the <Link> component, you can check out the following sections of the Next.js documentation:

#

If you want to maintain the state of your page (like input values or scroll position) when navigating between pages, you can use the layout pattern described in the Per-Page Layouts (https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#per-page-layouts) section of the Next.js documentation. This pattern allows you to persist the state of your page for a Single-Page Application (SPA) experience.

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

#

@lone acorn kapa.ai is still learning and improving, please let us know how it did by reacting below

lone acorn
#

@polar cosmos where are the docs for next/navigation

polar cosmosBOT
#

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

#

I'm sorry, but the provided extracts do not contain specific documentation for next/navigation. However, you can always refer to the official Next.js documentation for the most accurate and up-to-date information.

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

#

@lone acorn kapa.ai is still learning and improving, please let us know how it did by reacting below