Get path
Answered
Blue Picardy Spaniel posted this in #help-forum
Blue Picardy SpanielOP
How do I get the URL path in a server component?
Answered by American Crow
Here is a minimal example
//layout.tsx
import SidebarLinkHighlighter from "./sidebar-link-highlighter";
export default function SidebarLayout({ children }) {
return (
<div className="flex flex-col">
<div className="bg-gray-800 text-white">
<h1>Sidebar</h1>
<SidebarLinkHighlighter />
</div>
<div className="p-8 bg-gray-100">{children}</div>
</div>
)
}"use client"
import { cn } from "@/lib/utils"
import Link from "next/link"
import { usePathname } from "next/navigation"
export default function SidebarLinkHighlighter() {
const pathname = usePathname()
return (
<div className="flex flex-col bg-gray-500">
<Link
href="/1"
>
1 { pathname === "/1" && "🔥"}
</Link>
<Link
href="/2"
>
2 { pathname === "/2" && "🔥"}
</Link>
<Link
href="/3"
>
3 { pathname === "/3" && "🔥"}
</Link>
</div>
)
}13 Replies
Toyger
right now there is no easy way to do that, you can pass it from middleware as header, which kinda cumbersome but possible.
otherwise you need to change your logic depends on what you are trying to achieve, maybe use dynamic routes.
otherwise you need to change your logic depends on what you are trying to achieve, maybe use dynamic routes.
American Crow
^this or
extract the logic that depends on pathname into a Client Component and import it
extract the logic that depends on pathname into a Client Component and import it
no easy way though
Blue Picardy SpanielOP
i basically have a dashboard with a sidebar. each link in the sidebar goes to a different page, eg dashboard/general dashboard/settings etc. when i click each one i want the sidebar to be highlighted with which one you’re currently on and i was gonna extract that from the url
@Blue Picardy Spaniel i basically have a dashboard with a sidebar. each link in the sidebar goes to a different page, eg dashboard/general dashboard/settings etc. when i click each one i want the sidebar to be highlighted with which one you’re currently on and i was gonna extract that from the url
Toyger
probably you can ignore SSR generation for it, so you can just put useEffect inside your sidebar, and with usePathname https://nextjs.org/docs/app/api-reference/functions/use-pathname#do-something-in-response-to-a-route-change hook get current url and apply active element accordingly.
@Toyger probably you can ignore SSR generation for it, so you can just put useEffect inside your sidebar, and with usePathname https://nextjs.org/docs/app/api-reference/functions/use-pathname#do-something-in-response-to-a-route-change hook get current url and apply active element accordingly.
Blue Picardy SpanielOP
it’s a server component
do i have to use client
@Blue Picardy Spaniel it’s a server component
Toyger
offload only part with urls on sidebar to client component. you don't need to have full component as server, it will have zero benefits
American Crow
Here is a minimal example
//layout.tsx
import SidebarLinkHighlighter from "./sidebar-link-highlighter";
export default function SidebarLayout({ children }) {
return (
<div className="flex flex-col">
<div className="bg-gray-800 text-white">
<h1>Sidebar</h1>
<SidebarLinkHighlighter />
</div>
<div className="p-8 bg-gray-100">{children}</div>
</div>
)
}"use client"
import { cn } from "@/lib/utils"
import Link from "next/link"
import { usePathname } from "next/navigation"
export default function SidebarLinkHighlighter() {
const pathname = usePathname()
return (
<div className="flex flex-col bg-gray-500">
<Link
href="/1"
>
1 { pathname === "/1" && "🔥"}
</Link>
<Link
href="/2"
>
2 { pathname === "/2" && "🔥"}
</Link>
<Link
href="/3"
>
3 { pathname === "/3" && "🔥"}
</Link>
</div>
)
}Answer
Blue Picardy SpanielOP
thank you
@American Crow Here is a minimal example
tsx
//layout.tsx
import SidebarLinkHighlighter from "./sidebar-link-highlighter";
export default function SidebarLayout({ children }) {
return (
<div className="flex flex-col">
<div className="bg-gray-800 text-white">
<h1>Sidebar</h1>
<SidebarLinkHighlighter />
</div>
<div className="p-8 bg-gray-100">{children}</div>
</div>
)
}
tsx
"use client"
import { cn } from "@/lib/utils"
import Link from "next/link"
import { usePathname } from "next/navigation"
export default function SidebarLinkHighlighter() {
const pathname = usePathname()
return (
<div className="flex flex-col bg-gray-500">
<Link
href="/1"
>
1 { pathname === "/1" && "🔥"}
</Link>
<Link
href="/2"
>
2 { pathname === "/2" && "🔥"}
</Link>
<Link
href="/3"
>
3 { pathname === "/3" && "🔥"}
</Link>
</div>
)
}
My preferred way is a bit different https://nextjs-forum.com/post/1224347507434197052#message-1225254644843024454, but yes that does work as well