NextJS: dynamic router.pathname does not show path, but filename - how to get words in path?

Question

I'm making this as simple of an example as possible, I can include more code later if it needs more info to be resolved

I'm using dynamic routes in nextJS. My app pulls results from twitter based on the keywords entered into the dynamic route via API using twitter-v2 package

I'm trying to use the words in the route using router.pathname in order to create some attributes on the page, but it uses the filename instead of the words in the url.

NextJS version: Next 9.5.3

Render page path: /pages/[keywords].jsx

Example url:

http://localhost:3000/kpop-heroes

example page function:

import Router from 'next/router'

export default function Keywords() {
  const router = useRouter();

  const KEYWORDS = router.pathname
    .slice(1)
    .split('-')
    .join(' ');

  return (
   <div>Twitter reactions to <code>{KEYWORDS}</code></div>
  )
};

Renders:

Am I misunderstanding this feature? Is it possible to retrieve the words in the url instead of the filename?

Note: I've been using window.location.href as a workaround, but my understanding is accessing the window object is less than optimal

score 16 · Answer 1 · answered Oct 05 '21 at 18:50

16

Use the asPath property. It returns the path shown in the browser (including the query).

https://nextjs.org/docs/api-reference/next/router#router-object

const router = useRouter();

router.asPath

answered Oct 05 '21 at 18:50

Gabe

956
7
8

This should be the accepted answer, router.asPath will resolve all the dynamic parts of the url – Matthew Barnden Mar 18 '22 at 10:05
1

In my case I was using router.asPath in a useEffect and it wouldn't resolve the dynamic parts, so I had to add router.isReady in the dependency array and check for it in the useEffect callback. – Islam Yahia Feb 24 '23 at 02:55

score 5 · Answer 2 · answered Sep 29 '21 at 19:27

To get correct URL for both cases e.g. dynamic ([slug]) and fixed path:

const router = useRouter();

let relativeURL = "";

  const slug = router.query.slug;
  if (slug) {
    relativeURL = router.pathname.replace("[slug]", slug as string);
  } else {
    relativeURL = router.pathname;
  }

score 3 · Answer 3 · answered Oct 06 '20 at 06:42

I was just using the wrong method - the correct method is router.query.

Consider the following url:

http://localhost:3000/test-keywords?query=params,%20strings,%20other%20things&anotherLevel=more%20stuff

log the object produced by the method:

  const router = useRouter();
  console.log(router.query);

output:

  {
    anotherLevel: "more stuff"
    keywords: "test-keywords"
    query: "params, strings, other things"
  }

I must've glossed over it, it's clearly in the docs right here: https://nextjs.org/docs/routing/dynamic-routes

Thought I'd leave this up in case someone else confused about it, too

Yep this is exactly what i was looking for !! – Akashgreninja Aug 18 '23 at 13:27 — Akashgreninja, Aug 18 '23 at 13:27

score 0 · Answer 4 · answered Oct 06 '20 at 03:06

0

I think the right way is define the dynamic-routes under a specific path (ex. /twitter).

Render page path:

/pages/twitter/[keywords].jsx

Example url:

http://localhost:3000/twitter/kpop-heroes

It is unreasonable to define the dynamic-route at the first level of the url.

answered Oct 06 '20 at 03:06

bcjohn

2,383
12
27

I've been using the first level just fine (?). I don't think it matters if it's in a subdir. Under 'caveats' https://nextjs.org/docs/routing/dynamic-routes says: Predefined routes take precedence over dynamic routes, and dynamic routes over catch all routes. I personally just have index.jsx in the pages dir, and anything else defaults to [keywords].jsx – AveryFreeman Oct 06 '20 at 06:33

score 0 · Answer 5 · answered Nov 15 '22 at 19:11

This worked for me

import { useRouter } from "next/router";

...

const router = useRouter();
const path = router.asPath.split("?")[0]; // (remove query string and use asPath since dynamic slug was rendering as "[slug]" using pathname)

...

 const navigationList = (
    <MenuList>
      {links.map((item) => {    
        return (
          <MenuItem
            key={item.id}
            disabled={path == item.href}
            sx={{
              m: 0,
              p: 0,
              ...(path == item.href && {
                borderBottom: `1px solid ${theme.palette.primary.light}`,
                backgroundColor: theme.palette.primary.dark,
              }),
            }}
          >
            <StyledLink href={item.href}>{item.label}</StyledLink>
          </MenuItem>
        );
      })}
    </MenuList>
  );

NextJS: dynamic router.pathname does not show path, but filename - how to get words in path?

5 Answers5

Linked

Related