For Believers.
Discussions
'CarteProjet.js' : utilisation <a></a> obsolète
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 & Cie.
0 réponse
Inscrivez-vous ou connectez-vous pour participer à la discussion.
Informations
Créée le 13 mars 2023 17:02Dernière activité le 13 mars 2023 17:02