CODEWITHSUNDEEP
javascriptreactjsnext.js
Mac Hooper
Mac Hooper

Reputation: 93

Dynamic pages in Next.js won't link back to normal pages

I have a web site created with next.js, it has a section which is dynamic routing stored in a folder pages/artists/[slug].js which is great, I have to whole dynamic routing working perfectly fine.

The issue comes when I click in the navbar to go back to a standard pages i.e. Home, About or Contact.

Where is should link to /contact or /about it ends up linking to /artists/contact or /artists/about

How should I fix this issue? I can't seem to find anything online regarding this issue.

Thank you

Edit: Code for nav component

import {useState} from 'react'
import Link from 'next/link'
import config from '../../config'
export default function Menu() {
  const [menu, setMenu] = useState(false);
  const menuToggle = () => {
    setMenu(!menu),
      [menu, setMenu]

  }
  return (
    <>
      <a id="menubtn" onClick={menuToggle}>
        <svg width="40" height="40">
          <rect width="40" height="3" x="0" y="12"/>
          <rect width="40" height="3" x="0" y="24"/>
        </svg>
      </a>
      <nav id="menu">
        <a id="close" onClick={menuToggle}>&times;</a>
        <ul>
          {config.navigation.map((link) => (
            <li key={link}>
              <Link href={link}>
                <a onClick={menuToggle}>{link.charAt(0).toUpperCase() + link.slice(1)}</a>
              </Link>
            </li>
          ))}
        </ul>
      </nav>
)}

Upvotes: 1

Views: 1281

Answers (2)

Mac Hooper
Mac Hooper

Reputation: 93

I took a closer look at the code after sending it and noticed that the <Link> href's looked like this

<Link href={link}>
  <a onClick={menuToggle}>  {link.charAt(0).toUpperCase() + link.slice(1)}</a>
</Link>

The issue there being that the router takes the browser to about not /about which obviously causes issues on the dynamic pages.

I updated the code to this which fixed it

<Link href={`/${link}`}>
  <a onClick={menuToggle}>{link.charAt(0).toUpperCase() + link.slice(1)}</a>
</Link>

Upvotes: 3

Azpil
Azpil

Reputation: 46

Some code would help a lot to identify the issue. All i could say right now is double check your Link tags. Make sure you're importing the next/link package.

Docs reference next/link - Next.js

Upvotes: 1

Related Questions