Skip to content
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.

Sign up for GitHub

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

[examples] Next.js v13 use legacy behavior to fix example #34970

Merged
merged 5 commits into from
Nov 2, 2022
Merged

[examples] Next.js v13 use legacy behavior to fix example #34970

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8f6f27b
Update nextjs-with-typescript example to use legacyBehaviour on next/…
PetroSilenius Oct 31, 2022
30d1c77
Update nextjs example to use legacyBehaviour on next/link
PetroSilenius Oct 31, 2022
e605089
Fix prop type declartion order to be alphabetic
PetroSilenius Oct 31, 2022
44366cb
Fix prop declaration order to be aplphabetic
PetroSilenius Oct 31, 2022
d24f393
Spread props to multiple rows to fix prettier error
PetroSilenius Oct 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 23 additions & 2 deletions examples/nextjs-with-typescript/src/Link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,17 @@ interface NextLinkComposedProps

export const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComposedProps>(
function NextLinkComposed(props, ref) {
const { to, linkAs, replace, scroll, shallow, prefetch, locale, ...other } = props;
const {
to,
linkAs,
replace,
scroll,
shallow,
prefetch,
legacyBehavior = true,
PetroSilenius marked this conversation as resolved.
Show resolved Hide resolved
locale,
...other
} = props;

return (
<NextLink
Expand All @@ -29,6 +39,7 @@ export const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComp
shallow={shallow}
passHref
locale={locale}
legacyBehavior={legacyBehavior}
>
<Anchor ref={ref} {...other} />
</NextLink>
Expand All @@ -53,6 +64,7 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props,
as,
className: classNameProps,
href,
legacyBehavior,
linkAs: linkAsProp,
locale,
noLinkStyle,
Expand Down Expand Up @@ -82,7 +94,16 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props,
}

const linkAs = linkAsProp || as;
const nextjsProps = { to: href, linkAs, replace, scroll, shallow, prefetch, locale };
const nextjsProps = {
to: href,
linkAs,
replace,
scroll,
shallow,
prefetch,
legacyBehavior,
locale,
};

if (noLinkStyle) {
return <NextLinkComposed className={className} ref={ref} {...nextjsProps} {...other} />;
Expand Down
27 changes: 25 additions & 2 deletions examples/nextjs/src/Link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,17 @@ import { styled } from '@mui/material/styles';
const Anchor = styled('a')({});

export const NextLinkComposed = React.forwardRef(function NextLinkComposed(props, ref) {
const { to, linkAs, replace, scroll, shallow, prefetch, locale, ...other } = props;
const {
to,
linkAs,
replace,
scroll,
shallow,
prefetch,
legacyBehavior = true,
locale,
...other
} = props;

return (
<NextLink
Expand All @@ -21,6 +31,7 @@ export const NextLinkComposed = React.forwardRef(function NextLinkComposed(props
scroll={scroll}
shallow={shallow}
passHref
legacyBehavior={legacyBehavior}
locale={locale}
>
<Anchor ref={ref} {...other} />
Expand All @@ -30,6 +41,7 @@ export const NextLinkComposed = React.forwardRef(function NextLinkComposed(props

NextLinkComposed.propTypes = {
href: PropTypes.any,
legacyBehavior: PropTypes.bool,
linkAs: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
locale: PropTypes.string,
passHref: PropTypes.bool,
Expand All @@ -48,6 +60,7 @@ const Link = React.forwardRef(function Link(props, ref) {
as,
className: classNameProps,
href,
legacyBehavior,
linkAs: linkAsProp,
locale,
noLinkStyle,
Expand Down Expand Up @@ -77,7 +90,16 @@ const Link = React.forwardRef(function Link(props, ref) {
}

const linkAs = linkAsProp || as;
const nextjsProps = { to: href, linkAs, replace, scroll, shallow, prefetch, locale };
const nextjsProps = {
to: href,
linkAs,
replace,
scroll,
shallow,
prefetch,
legacyBehavior,
locale,
};

if (noLinkStyle) {
return <NextLinkComposed className={className} ref={ref} {...nextjsProps} {...other} />;
Expand All @@ -99,6 +121,7 @@ Link.propTypes = {
as: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
className: PropTypes.string,
href: PropTypes.any,
legacyBehavior: PropTypes.bool,
linkAs: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
locale: PropTypes.string,
noLinkStyle: PropTypes.bool,
Expand Down