New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Ch01 Index Page - Invalid <Link>
with <a>
child
#525
Comments
I want to work on this issue. Can you tell me more about it |
following the guide in Chapter 1. Header Component if I try to run the file as is with the examples given in the book. I receive this error: following the link that the server error gives me to learn more gives us a walk-around by editing the <Link by adding import Link from 'next/link';
import Toolbar from '@mui/material/Toolbar';
import Grid from '@mui/material/Grid';
import { styleToolbar } from './SharedStyles';
const Header = () => (
<div>
<Toolbar style={styleToolbar}>
<Grid container direction="row" justifyContent="space-around" align="center">
<Grid item xs={12} style={{ textAlign: 'right' }}>
<Link legacyBehavior href="/login">
<a style={{ margin: '0px 20px 0px auto' }}>Log in</a>
</Link>
</Grid>
</Grid>
</Toolbar>
</div>
);
export default Header; |
You need not to use tag inside Link tag, Link tag itself is a reference of tag in nextjs |
Hello, I have just started this project and I am on the first Chapter where we add the Header component to the Index Page.
After Adding the Component to Index, I received the following error:
Unhandled Runtime Error
Error: Invalid with child. Please remove or use .
The error provides a link (see below) with a work around.
Work Around - Add
legacyBehavior
to your Link tag before the closing. See Reference below.https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor.
The text was updated successfully, but these errors were encountered: