CODEWITHSUNDEEP
javascriptreactjsnext.js
Sumanth Reddy
Sumanth Reddy

Reputation: 304

How to use Link tag

As mentioned in the nextjs docs, I couldn't do client side routing via the Link tag when used on a div, though I can navigate if used on the anchor tag.
I'm using nextjs v6.0.3

import Link from "next/link";
export default ({ src, title }) => (
 <Link href="/one">
    <div className="element">
        <div className="img-container">
            <img src={src} />
        </div>
        <style jsx>{`
    .element{
        width: 30%;
        height: auto;
        margin:10px;
        border-radius:50%;
    }
    .img-container{
        width:100%;
        height:auto;
    }
    img{
        width:100%;
        height:auto;
    }
    .event-title{
        text-align:center;
    }
    `}

        </style>
        <div className="event-title"><p>{title}</p></div>
    </div >
</Link>

)

Upvotes: 1

Views: 9709

Answers (6)

Ngo Van Quan
Ngo Van Quan

Reputation: 132

I have used this trick and it is working fine.
In the file _app.js, import an empty css file: 

import "../assets/css/empty.css";

Upvotes: 0

younes khanbaba
younes khanbaba

Reputation: 328

replace this:

<Link href="/one">

with this:

<Link route="/one">

Upvotes: 0

Mehrdad Masoumi
Mehrdad Masoumi

Reputation: 410

Import the library first at the top of the page

import Link from "next/link";

Then use it like that

<Link href={'/'} params={'id': 1}>
  <a>link</a>
</.Link>

if useing node js router href linked by name route

Upvotes: 3

Sultan H.
Sultan H.

Reputation: 2938

From my understanding for such a problem, it only happens in development mode.. Can you please verify this for me?

Try this as a work around, put that listener on you componentDidMount lifecycle method in pages/_app.js.

import Router from 'next/router';

Router.events.on('routeChangeComplete', () => {
  if (process.env.NODE_ENV !== 'production') {
    const els = document.querySelectorAll('link[href*="/_next/static/css/styles.chunk.css"]');
    const timestamp = new Date().valueOf();
    els[0].href = '/_next/static/css/styles.chunk.css?v=' + timestamp;
  }
});

From: Relative issue discussen

Upvotes: 0

Joshua Tuscan
Joshua Tuscan

Reputation: 373

Not sure exactly what your question is since you seem to answer it yourself by stating that you can't use with a div and still have it route. But to reiterate, if you are using with an element other than the href will not be passed, only the onClick event. You'd have to trigger the routing yourself based on the onClick. It seems to me that just converting the to an would allow you still route to /one.

Upvotes: 0

Jyoti Arora
Jyoti Arora

Reputation: 141

You are using style tag in wrong place thats creating the issue. Try to use it like this as mentioned in nextjs documentation.

 <div>
    <Link href='/one'>
      <div className='element'>
        <div className='img-container'>
          <img src={src} />
        </div>
        <div className='event-title'><p>{title}</p></div>
      </div>
    </Link>
    <style jsx>{`
      .element{
          width: 30%;
          height: auto;
          margin:10px;
          border-radius:50%;
      }
      .img-container{
          width:100%;
          height:auto;
      }
      img{
          width:100%;
          height:auto;
      }
      .event-title{
          text-align:center;
      }
      `}
    </style>
 </div>

Upvotes: 6

Related Questions