0

I'm trying to learn next js routing and encountered an error.

Every time I click the Link tag it just changes the url from "localhost:3000" to "localhost:3000/sample" but it doesn't display the "Hi" on my sample.js file

import React from 'react'
import Link from 'next/link'
const Lnkz = () => {
    return (
        <div>
            <Link href={"/sample"} as={'/sample'} >
                <a>CLICK ME</a>
            </Link>

        </div>
    )
}

export default Lnkz

and here is my sample.js file that displays "Hi" only.

export default function Sample() {
    return (
        <div>
            <h1>hi</h1>
        </div>
    )
}

My entry file.

import '../styles/globals.css'
import Lnkz from './Lnkz'

function MyApp({ Component, pageProps }) {
  return (
    <div>

      <Lnkz />

    </div>
  )
}

export default MyApp

NOTE: I already tried to do this but it doesn't work too.

import React from 'react'
import Link from 'next/link'
const Lnkz = () => {
    return (
        <div>
            <Link href="/sample" as='/sample'>
                <a>CLICK ME</a>
            </Link>

        </div>
    )
}

export default Lnkz

Here is my directory

directory

EDIT: Added the code I also tried before and added screenshot of my directory.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
  • 1
    Also include snapshot of your directory, next js routing is based on that – timbersaw Feb 17 '21 at 12:40
  • Hi @Solvenc1no, I added the directory. Thanks for pointing out –  Feb 17 '21 at 12:56
  • Not directly related to the issue (which like @Solvenc1no mentioned is probably related to casing) but you should not have your components inside the `pages/` folder. That folder should only contain your pages. – juliomalves Feb 17 '21 at 13:56

1 Answers1

2

I think after seeing your directory, the problem is in the casing. Only include "as" if you are using an older version of next.js, more on that here.

try this or change your file name to sample.js (with small 's')

  <Link href={"/Sample"}>
        <a>CLICK ME</a>
  </Link>
visizky
  • 701
  • 1
  • 8
  • 27
timbersaw
  • 620
  • 5
  • 9