Discussions

'CarteProjet.js' : utilisation <a></a> obsolète

Image

Bonjour !

L'écriture du JSX du composant 'CarteProjet.js' de la manière suivant <Link><a>...</a></Link> me retourne le message d'erreur suivant : 

Unhandled Runtime Error

Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>. Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor

Call Stack
LinkComponent
node_modules\next\dist\client\link.js (274:22)
renderWithHooks
node_modules\react-dom\cjs\react-dom.development.js (16305:0)
updateForwardRef
node_modules\react-dom\cjs\react-dom.development.js (19226:0)
beginWork
node_modules\react-dom\cjs\react-dom.development.js (21636:0)
HTMLUnknownElement.callCallback
node_modules\react-dom\cjs\react-dom.development.js (4164:0)
Object.invokeGuardedCallbackDev
node_modules\react-dom\cjs\react-dom.development.js (4213:0)
invokeGuardedCallback
node_modules\react-dom\cjs\react-dom.development.js (4277:0)
beginWork$1
node_modules\react-dom\cjs\react-dom.development.js (27451:0)
performUnitOfWork
node_modules\react-dom\cjs\react-dom.development.js (26557:0)
workLoopSync
node_modules\react-dom\cjs\react-dom.development.js (26466:0)
renderRootSync
node_modules\react-dom\cjs\react-dom.development.js (26434:0)
performSyncWorkOnRoot
node_modules\react-dom\cjs\react-dom.development.js (26085:0)
flushSyncCallbacks
node_modules\react-dom\cjs\react-dom.development.js (12042:0)
flushSync
node_modules\react-dom\cjs\react-dom.development.js (26201:0)
scheduleRefresh
node_modules\react-dom\cjs\react-dom.development.js (27795:0)
renderer.scheduleRefresh
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js (5218:16)
eval
node_modules\next\dist\compiled\react-refresh\cjs\react-refresh-runtime.development.js (265:0)
Set.forEach
<anonymous>
Object.performReactRefresh
node_modules\next\dist\compiled\react-refresh\cjs\react-refresh-runtime.development.js (254:0)
applyUpdate
node_modules\next\dist\compiled\@next\react-refresh-utils\dist\internal\helpers.js (123:0)
statusHandler
node_modules\next\dist\compiled\@next\react-refresh-utils\dist\internal\helpers.js (140:0)
setStatus
file:///C:/Users/Lordtoinou/Desktop/Believemy%20Formation/Next/React/projet-test/projet1-next/.next/static/chunks/webpack.js (453:55)
<unknown>
/_next/static/chunks/webpack.js (624:21)

 

Je pense que cela est du à une version antérieure de Next.js. J'ai pu contourner le problème en supprimant l'utilisation de <a></a> et en le remplacant par <Link legacyBehavior> :

// Librairie
import { useRouter } from 'next/router';
import classes from './CarteProjet.module.css';
import Link from 'next/link';

export default function CarteProjet() {
  // VARIABLES
  // Variable 1 - Router
  const router = useRouter();

  // Variable 2 - slug
  const slug = 'blog';

  // METHODES
  // Méthode 1 - cardClickedHandler
  // const cardClickedHandler = () => {
  //   router.push({
  //     pathname: '/projets/[slug]',
  //     query: {
  //       slug: 'blog',
  //     },
  //   }); // Retour sur PROJET avec historique (!== replace('/projet'))
  // };

  return (
    <Link
      legacyBehavior
      href={{
        pathname: `/projets/${slug}`,
      }}>
      <div className={classes.CarteProjet}>
        <h3>Blog</h3>
        <p>
          Création d'un blog en utilisant React.js, Firebase et
          toastify
        </p>
      </div>
    </Link>
  );
}

 

Bon courage a tous !

 

Antoine Delamare
Blockchain &amp; Cie.
0 réponse
Image
Inscrivez-vous ou connectez-vous pour participer à la discussion.

Informations

Créée le March 13, 2023 4:02 PM
Dernière activité le March 13, 2023 4:02 PM