If the path is localhost:3000/personal/view the class "test" should be added to the p tag which has the id tab1.
If the path is localhost:3000/personal/view/test the class "test2" should be added to the p tag which has the id tab2.
in typescript
#path control
sonic apex
worldly walrusBOT
Hi @sonic apex. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To achieve this, you can use the useRouter hook from Next.js to access the current route path. Then, you can conditionally add classes to your p tags based on the current path. Here's an example in TypeScript:
import { useRouter } from 'next/router'
import React, { useEffect, useState } from 'react'
export default function Page() {
const router = useRouter()
const [classForTab1, setClassForTab1] = useState('')
const [classForTab2, setClassForTab2] = useState('')
useEffect(() => {
if (router.pathname === '/personal/view') {
setClassForTab1('test')
} else if (router.pathname === '/personal/view/test') {
setClassForTab2('test2')
}
}, [router.pathname])
return (
<>
<p id="tab1" className={classForTab1}>Content for tab1</p>
<p id="tab2" className={classForTab2}>Content for tab2</p>
</>
)
}
In this example, we're using the useEffect hook to listen for changes in the route path. When the path matches one of your specified paths, it sets the corresponding state variable (classForTab1 or classForTab2) to the desired class name. These state variables are then used as the className for the respective p tags.
Please note that this is a basic example and you might need to adjust it based on your exact requirements and project setup.
For more information on the useRouter hook, you can refer to the Next.js documentation (https://nextjs.org/docs/pages/api-reference/functions/use-router).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
sonic apex
@worldly walrus i use the App direction and i become following error: "Error: NextRouter was not mounted."
worldly walrusBOT
Let me check the knowledge base for you. One moment! :books:
The error message "Error: NextRouter was not mounted" typically indicates that you're trying to use the useRouter hook from Next.js outside of a component or in a place where the Next.js Router is not available.
If you're using the new App Router introduced in Next.js 13, make sure you're using the useRouter hook inside a component that is part of the routing system.
Here's an example of how to use the useRouter hook correctly:
import { useRouter } from 'next/router'
export default function MyComponent() {
const router = useRouter()
// You can now use the router object
console.log(router.pathname)
// Rest of your component
}
If you're still facing issues, it would be helpful to review the Next.js documentation on routing (https://nextjs.org/docs/app/building-your-application/routing) and the useRouter hook (https://nextjs.org/docs/pages/api-reference/functions/use-router).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
sonic apex
@worldly walrus how can i use it in a Component?
worldly walrusBOT
Let me check the knowledge base for you. One moment! :books:
In the new App Router introduced in Next.js 13, you should use the useRouter hook from next/navigation instead of next/router. Here's an example of how to use it in a component:
import { useRouter } from 'next/navigation'
export default function MyComponent() {
const router = useRouter()
// You can now use the router object
console.log(router.asPath)
// Rest of your component
}
Please note that the new useRouter hook does not return the pathname string or the query object. If you need these, you should use the usePathname and useSearchParams hooks respectively:
import { useRouter, usePathname, useSearchParams } from 'next/navigation'
export default function MyComponent() {
const router = useRouter()
const pathname = usePathname()
const searchParams = useSearchParams()
// You can now use the router object, pathname, and searchParams
console.log(router.asPath, pathname, searchParams)
// Rest of your component
}