How to get router.pathname value using usePathname()?

[v3rron]

Previously we had access to actual route name, that could be used in conditions, like this:

// lib/auth.tsx
import { useRouter } from 'next/router'

const ALLOWED_ROUTES = ['/login', 'register', '/items/[id]/edit']

const router = useRouter()
const currentRoute = router.pathname // this returns a proper route name with dynamic variables i.e. '/items/[id]/edit'

if (!ALLOWED_ROUTES.includes(currentRoute)) {
  redirectToLogin()
}

The problem now is, when we use the new usePathname hook, it returns the actual URL with param id and not the route name:

// lib/auth.tsx
import { usePathname } from 'next/navigation'

const ALLOWED_ROUTES = ['/login', 'register', '/items/[id]/edit']

const currentRoute = usePathname() // now this equals to '/items/123/edit'

if (!ALLOWED_ROUTES.includes(currentRoute)) {
  redirectToLogin()
}

How do we get /items/[id]/edit route name?

[Uy575]

try useParams() instead of usePathname().
you can read it about here https://nextjs.org/docs/app/api-reference/functions/use-params

[giannif]

that doesn't give you the route name such as/items/[id]/edit, it would only give you an id value

[zakwear]

Being able to match the route name as @giannif and @v3rron describes would be useful for dynamic/nested/parallel layout configurations.

[mfrezghi]

Any updates on this? Ran into the same issue.

[Lrunlin]

function useGetRawPath() {
const params = useParams();
const pathname = usePathname();
const splittedRoute = pathname.split("/");

if (typeof params === "object" && params !== null) {
let reconstructedPath = "";

for (let i = 1; i < splittedRoute.length; i++) {
  const segment = splittedRoute[i];

  // Check if the segment matches any value in the params object
  const matchingKey = Object.keys(params).find(key => params[key] === segment);

  if (matchingKey) {
    // Replace the segment with the dynamic segment
    reconstructedPath += `/[${matchingKey}]`;
  } else {
    // Keep the original segment
    reconstructedPath += `/${segment}`;
  }
}

return reconstructedPath;

} else {
// Params object is not present
return pathname;
}
}

[Lrunlin]

函数 useGetRawPath() { const params = useParams(); const pathname = usePathname(); const splittedRoute = pathname.split("/");

如果 (typeof params === "object" && params !== null) { 让 reconstructedPath = "";

for (let i = 1; i < splittedRoute.length; i++) {
  const segment = splittedRoute[i];

  // Check if the segment matches any value in the params object
  const matchingKey = Object.keys(params).find(key => params[key] === segment);

  if (matchingKey) {
    // Replace the segment with the dynamic segment
    reconstructedPath += `/[${matchingKey}]`;
  } else {
    // Keep the original segment
    reconstructedPath += `/${segment}`;
  }
}

return reconstructedPath;

} else { // Params 对象不存在 return pathname; } }

#61846

[Lrunlin]

#61846

[Lrunlin]

import { useParams, usePathname } from "next/navigation";

// 获取page router下的router.pathname
// #61846

function useGetRawPath() {
const params = useParams();
const pathname = usePathname();
const splittedRoute = pathname.split("/");

if (typeof params === "object" && params !== null) {
let reconstructedPath = "";

for (let i = 1; i < splittedRoute.length; i++) {
  const segment = splittedRoute[i];

  // Check if the segment matches any value in the params object
  const matchingKey = Object.keys(params).find(key => params[key] === segment);

  if (matchingKey) {
    // Replace the segment with the dynamic segment
    reconstructedPath += `/[${matchingKey}]`;
  } else {
    // Keep the original segment
    reconstructedPath += `/${segment}`;
  }
}

return reconstructedPath;

} else {
// Params object is not present
return pathname;
}
}
export default useGetRawPath;

[sectsect]

Hope it's okay to share this here — apologies in advance if this feels like self-promotion!

I recently built a small package to address a similar issue.
You can check it out here: https://github.com/sectsect/use-placeholder-path

Hope it’s helpful!