<Link> getting undefined when trying to use it with props

[danilo-leal]

Hey, y'all!

I'm trying to use the <Link> feature in some of my components but I'm getting the following error: Failed prop type: The prop href expects a string or object in <Link>, but got undefined instead.

Here's a code snippet of mine as to how I'm trying to use passing a prop:

import React from 'react';
import DarkModeButton from './DarkModeButton';
import Link from 'next/link';

export default function AppBar(props) {
  return (
    <div className="w-screen bg-white dark:bg-blackish sticky top-0 border-solid border-b border-gray-200 dark:border-black px-5 py-4 opacity-90 z-10">
      <nav className="max-w-5xl m-auto flex justify-between items-center">
        <button
          aria-label="Back button"
          type="button"
          className="p-2 rounded-lg transition-colors hover:bg-gray-100 dark:hover:bg-black "
        >
          <Link href={props.goBackTo}>
            <svg
              className="w-4 h-4 fill-current text-draplin"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                d="M10 19l-7-7m0 0l7-7m-7 7h18"
              ></path>
            </svg>
          </Link>
        </button>
        <div className="flex items-center space-x-6 align-baseline">
          <DarkModeButton />
        </div>
      </nav>
    </div>
  );
}

I've been meaning to replace all the <a> tags I'm using throughout all of my site to the next Link but I have no clue as to how to proceed here. I'd appreciate it if anyone shed a light here!

[mkrtchian]

When I try on a simple example, passing a prop to Link's href works. Maybe your goBackTo prop is really undefined ? Could you console.log it to see if it displays the value ?

[Chandraprakash-Darji]

@mkrtchian I am getting this error ::

Error: Failed prop type: The prop `href` expects a `string` or `object` in `<Link>`, but got `undefined` instead.
null

My code is this

import React from "react";
import Link from "next/link";
export default ({ title, address }) => {
  return (
    <Link
      href="/"
      className="h-full 
      w-max
      pb-2
      px-2
      border-b-4 
      border-transparent
    text-white 
    hover:border-white dark:hover:border-myPrimaryDark      
      dark:hover:border-myLightTone
      transition-all duration-200 "
    >
      {title}
    </Link>
  );
};

import React from "react";
import Link from "next/link";
export default ({ title, address }) => {
  return (
    <Link
      href="/"
      className="h-full
        flex items-center border-b-4 
        border-transparent
      hover:text-white
      hover:border-white dark:hover:border-myPrimaryDark
        dark:hover:border-myLightTone 
        transition-all duration-200 "
    >
      {title}
    </Link>
  );
};

I dont't Know why i am getting the errror.
Full code https://github.com/Chandraprakash-Darji/text-utilise

[Abdulhadu]

can you solve this error? If Kindly let me know How I face the same issue with my next.js App at the final implementations

[TeshaneCrawford]

I had this error and all I did was to restart the development server and my IDE

[Babbili]

@danilo-leal just write it this way href={`/${props.goBackTo}`}
and better to wrap what's inside the Link component with <a> tag as in next/link docs

          <Link href={`/${props.goBackTo}`}>
            <a>
             <svg
               className="w-4 h-4 fill-current text-draplin"
               stroke="currentColor"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg">
               <path
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 strokeWidth="3"
                 d="M10 19l-7-7m0 0l7-7m-7 7h18">
               </path>
             </svg>
           </a>
          </Link>

[abdukadirov]

Uncaught Error: Invalid with child. Please remove or use .
it's not helped if wrap a tag this error appears

[anisulislampranto]

I am facing the same error. what's wrong with my code ?

import Head from 'next/head
import Link from 'next/link'

import { AuthLayout } from '@/components/AuthLayout'
import { Button } from '@/components/Button'
import { TextField } from '@/components/Fields'

export default function Login() {
return (
<>
<Head>
<title>Sign In - Pocket</title>
</Head>
<AuthLayout
title="Sign in to account"
subtitle={
<>
Don’t have an account?
<Link to='/register' className="text-cyan-600">
Sign up
</Link>
for a free trial.
</>
}
>
<form>
<div className="space-y-6">
<TextField
label="Email address"
id="email"
name="email"
type="email"
autoComplete="email"
required
/>
<TextField
label="Password"
id="password"
name="password"
type="password"
autoComplete="current-password"
required
/>
</div>
<Button type="submit" color="cyan" className="mt-8 w-full">
Sign in to account
</Button>
</form>
</AuthLayout>
</>
)
}

[Babbili]

What's not !

[pablojsx]