TypeError

import { useRouter } from "next/router";

export default function PostAll() {
  const router = useRouter();
  const { all } = router.query;

  return (
    <div>
      <h1>Post: {all.join("/")}</h1>
    </div>
  );
}

wait  - piling...
event - piled client and server successfully in 32 ms (176 modules)
error - pages/post/[...all].js (9:21) @ PostAll
TypeError: Cannot read properties of undefined (reading 'join')
   7 |   return (
   8 |     <div>
>  9 |       <h1>Post: {all.join("/")}</h1>
     |                     ^
  10 |     </div>
  11 |   );
  12 | }

{
  "dependencies": {
    "next": "12.0.7",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
}

I am a very beginner and I am learning by watching online lectures. I can't quite figure out why I'm getting an error in this short code.

TypeError

import { useRouter } from "next/router";

export default function PostAll() {
  const router = useRouter();
  const { all } = router.query;

  return (
    <div>
      <h1>Post: {all.join("/")}</h1>
    </div>
  );
}

wait  - piling...
event - piled client and server successfully in 32 ms (176 modules)
error - pages/post/[...all].js (9:21) @ PostAll
TypeError: Cannot read properties of undefined (reading 'join')
   7 |   return (
   8 |     <div>
>  9 |       <h1>Post: {all.join("/")}</h1>
     |                     ^
  10 |     </div>
  11 |   );
  12 | }

{
  "dependencies": {
    "next": "12.0.7",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
}

I am a very beginner and I am learning by watching online lectures. I can't quite figure out why I'm getting an error in this short code.

• javascript
• reactjs
• join
• next.js
• typeerror

2 Answers 2

router.query by default is an empty object{}, so after const { all } = router.query;, all is undefined. And you can't call join on undefined, as the error is telling you. The real problem is OP is navigating to "localhost:3000/post/hello/world" but still getting a null pointer exception. The reason for that is the ponent pre-rendered with an empty object and then rendered again with the array. This behavior is in the documentation linked below. "It[query] will be an empty object during prerendering if the page doesn't have data fetching requirements." So what OP needs is just a null check.

Documentation for the router is here

return (
  <div>
    <h1>Post: {all && all.join("/")}</h1>
  </div>
);

This error also occurred in Next.js v14.2.5. And I upgraded it to the latest version (14.2.10). Everything works fine.