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

Jump to bottom

Custom anchor tag inside <Link> #816

Closed
ccorcos opened this issue Jan 18, 2017 · 9 comments
Closed

Custom anchor tag inside <Link> #816

ccorcos opened this issue Jan 18, 2017 · 9 comments

Comments

@ccorcos
Copy link

ccorcos commented Jan 18, 2017

I'm checking out the code here and it appears that you're enforcing an anchor tag to be the direct descendant of a <Link>.

I'm having an issue because I like to create a layer of indirection for all of the basic HTML tags so I can customize them:

// typography.js
export const A = props => <a className={anchor} {...props}/>

// somewhere.js
import { A } from '../ui/typography'
<Link href='/login'><A>Login</A></Link>

I also want to mention that forcing a <Link> to have an anchor as a child yet not providing the anchor tag seems a little superfluous... Anyways, what do you think we should do? I'm happy to help.
@arunoda
Copy link
Contributor

arunoda commented Jan 18, 2017 •
edited
Loading

In this case, use our imperative routing api via next/router

next/link only offer for some basic use cases.

@nkzawa
Copy link
Contributor

nkzawa commented Jan 18, 2017

I think Link should accept any elements like <Link><button>click me</button></Link>. It can be a bug. I'm not sure about custom elements though.
cc @rauchg

@impronunciable
Copy link
Contributor

That's the idea. <Link> will be just a HoC applying an onClick event. We added a warning and will modify the behavior soon

@timneutkens timneutkens mentioned this issue Jan 18, 2017
Closed
@ccorcos
Copy link
Author

ccorcos commented Jan 19, 2017

In this case, use our imperative routing api via next/router

Hmm, wrapping prefetch looks easy but Link looks like it does a lot more.

@timneutkens timneutkens mentioned this issue Jan 19, 2017
Closed
@impronunciable
Copy link
Contributor

This is not the case anymore. You can use anything (but a plain string) as the direct descendant for a Link.

Thanks for reporting

@queckezz
Copy link

queckezz commented Jun 19, 2017 •
edited
Loading

However, it's not possible to receive <Link />s href prop, as that will only get passed down when it's a normal a-tag. Is there any disadvantage for also allowing react components to get the href prop? Allowing this would enable the following code:

const Button = ({ href, children }) => (
  <a href={href}>{children}</a>
)

const App = () => (
  <Link href={{ pathname: '/stage', query: { id: 1} }}>
    <Button>Starten</Button>
  </Link>
)

I'd like to seperate the linking behavior from the actual presentation (because button could also be different things than a link).

@tommyka
Copy link

tommyka commented Mar 15, 2018

Its possible to use onClickCapture to catch the click-event before it reaches the listener of the link.
If you do a preventDefault there it disables the link component

@tomasdev
Copy link

@impronunciable i think i love you.

@kylemh kylemh mentioned this issue Aug 29, 2018
Merged
@lock lock bot locked as resolved and limited conversation to collaborators Mar 22, 2019
@ijjk
Copy link
Member

ijjk commented Oct 3, 2019

Stats from current PR

Default Server Mode
General
zeit/next.js canary zeit/next.js canary Change
buildDuration 16.1s 16.9s ⚠️ +853ms
nodeModulesSize 48.3 MB 48.3 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary zeit/next.js canary Change
main-HASH.js 18.1 kB 18.1 kB ✓
main-HASH.js gzip 6.61 kB 6.61 kB ✓
webpack-HASH.js 1.53 kB 1.53 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
4952ddcd88e7..2b8407376.js 21.9 kB 21.9 kB ✓
4952ddcd88e7..7376.js gzip 7.81 kB 7.81 kB ✓
de003c3a9d30..6604acae7.js 43.2 kB 43.2 kB ✓
de003c3a9d30..cae7.js gzip 15.5 kB 15.5 kB ✓
framework.5b..dbaff70d3.js 125 kB 125 kB ✓
framework.5b..70d3.js gzip 39.4 kB 39.4 kB ✓
Overall change 210 kB 210 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary zeit/next.js canary Change
main-HASH.module.js 16.4 kB 16.4 kB ✓
main-HASH.module.js gzip 6.35 kB 6.35 kB ✓
webpack-HASH.module.js 1.53 kB 1.53 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..42.module.js 45.6 kB 45.6 kB ✓
de003c3a9d30..dule.js gzip 16.5 kB 16.5 kB ✓
framework.5b..d3.module.js 125 kB 125 kB ✓
framework.5b..dule.js gzip 39.4 kB 39.4 kB ✓
Overall change 189 kB 189 kB ✓
Client Pages
zeit/next.js canary zeit/next.js canary Change
_app.js 1.81 kB 1.81 kB ✓
_app.js gzip 873 B 873 B ✓
_error.js 12 kB 12 kB ✓
_error.js gzip 4.73 kB 4.73 kB ✓
hooks.js 12.7 kB 12.7 kB ✓
hooks.js gzip 4.79 kB 4.79 kB ✓
index.js 318 B 318 B ✓
index.js gzip 222 B 222 B ✓
link.js 8.14 kB 8.14 kB ✓
link.js gzip 3.5 kB 3.5 kB ✓
routerDirect.js 408 B 408 B ✓
routerDirect.js gzip 281 B 281 B ✓
withRouter.js 419 B 419 B ✓
withRouter.js gzip 280 B 280 B ✓
Overall change 35.8 kB 35.8 kB ✓
Client Pages Modern
zeit/next.js canary zeit/next.js canary Change
_app.module.js 1.7 kB 1.7 kB ✓
_app.module.js gzip 832 B 832 B ✓
_error.module.js 23.3 kB 23.3 kB ✓
_error.module.js gzip 8.59 kB 8.59 kB ✓
hooks.module.js 1.52 kB 1.52 kB ✓
hooks.module.js gzip 793 B 793 B ✓
index.module.js 294 B 294 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js 8.53 kB 8.53 kB ✓
link.module.js gzip 3.68 kB 3.68 kB ✓
routerDirect.module.js 394 B 394 B ✓
routerDirect..dule.js gzip 281 B 281 B ✓
withRouter.module.js 404 B 404 B ✓
withRouter.m..dule.js gzip 278 B 278 B ✓
Overall change 36.1 kB 36.1 kB ✓
Client Build Manifests
zeit/next.js canary zeit/next.js canary Change
_buildManifest.js 81 B 81 B ✓
_buildManifest.js gzip 61 B 61 B ✓
_buildManifest.module.js 81 B 81 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 162 B 162 B ✓
Rendered Page Sizes
zeit/next.js canary zeit/next.js canary Change
index.html 3.62 kB 3.62 kB ✓
index.html gzip 948 B 948 B ✓
link.html 3.66 kB 3.66 kB ✓
link.html gzip 955 B 955 B ✓
withRouter.html 3.67 kB 3.67 kB ✓
withRouter.html gzip 943 B 943 B ✓
Overall change 10.9 kB 10.9 kB ✓
Serverless Mode
General
zeit/next.js canary zeit/next.js canary Change
buildDuration 16.4s 16.7s ⚠️ +351ms
nodeModulesSize 48.3 MB 48.3 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary zeit/next.js canary Change
main-HASH.js 18.1 kB 18.1 kB ✓
main-HASH.js gzip 6.61 kB 6.61 kB ✓
webpack-HASH.js 1.53 kB 1.53 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
4952ddcd88e7..2b8407376.js 21.9 kB 21.9 kB ✓
4952ddcd88e7..7376.js gzip 7.81 kB 7.81 kB ✓
de003c3a9d30..6604acae7.js 43.2 kB 43.2 kB ✓
de003c3a9d30..cae7.js gzip 15.5 kB 15.5 kB ✓
framework.5b..dbaff70d3.js 125 kB 125 kB ✓
framework.5b..70d3.js gzip 39.4 kB 39.4 kB ✓
Overall change 210 kB 210 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary zeit/next.js canary Change
main-HASH.module.js 16.4 kB 16.4 kB ✓
main-HASH.module.js gzip 6.35 kB 6.35 kB ✓
webpack-HASH.module.js 1.53 kB 1.53 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..42.module.js 45.6 kB 45.6 kB ✓
de003c3a9d30..dule.js gzip 16.5 kB 16.5 kB ✓
framework.5b..d3.module.js 125 kB 125 kB ✓
framework.5b..dule.js gzip 39.4 kB 39.4 kB ✓
Overall change 189 kB 189 kB ✓
Client Pages
zeit/next.js canary zeit/next.js canary Change
_app.js 1.81 kB 1.81 kB ✓
_app.js gzip 873 B 873 B ✓
_error.js 12 kB 12 kB ✓
_error.js gzip 4.73 kB 4.73 kB ✓
hooks.js 12.7 kB 12.7 kB ✓
hooks.js gzip 4.79 kB 4.79 kB ✓
index.js 318 B 318 B ✓
index.js gzip 222 B 222 B ✓
link.js 8.14 kB 8.14 kB ✓
link.js gzip 3.5 kB 3.5 kB ✓
routerDirect.js 408 B 408 B ✓
routerDirect.js gzip 281 B 281 B ✓
withRouter.js 419 B 419 B ✓
withRouter.js gzip 280 B 280 B ✓
Overall change 35.8 kB 35.8 kB ✓
Client Pages Modern
zeit/next.js canary zeit/next.js canary Change
_app.module.js 1.7 kB 1.7 kB ✓
_app.module.js gzip 832 B 832 B ✓
_error.module.js 23.3 kB 23.3 kB ✓
_error.module.js gzip 8.59 kB 8.59 kB ✓
hooks.module.js 1.52 kB 1.52 kB ✓
hooks.module.js gzip 793 B 793 B ✓
index.module.js 294 B 294 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js 8.53 kB 8.53 kB ✓
link.module.js gzip 3.68 kB 3.68 kB ✓
routerDirect.module.js 394 B 394 B ✓
routerDirect..dule.js gzip 281 B 281 B ✓
withRouter.module.js 404 B 404 B ✓
withRouter.m..dule.js gzip 278 B 278 B ✓
Overall change 36.1 kB 36.1 kB ✓
Client Build Manifests
zeit/next.js canary zeit/next.js canary Change
_buildManifest.js 81 B 81 B ✓
_buildManifest.js gzip 61 B 61 B ✓
_buildManifest.module.js 81 B 81 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 162 B 162 B ✓
Serverless bundles
zeit/next.js canary zeit/next.js canary Change
_error.js 253 kB 253 kB ✓
_error.js gzip 67.9 kB 67.9 kB ✓
hooks.html 3.75 kB 3.75 kB ✓
hooks.html gzip 980 B 980 B ✓
index.js 254 kB 254 kB ✓
index.js gzip 68.2 kB 68.2 kB ✓
link.js 261 kB 261 kB ✓
link.js gzip 70.3 kB 70.3 kB ✓
routerDirect.js 255 kB 255 kB ✓
routerDirect.js gzip 68.3 kB 68.3 kB ✓
withRouter.js 254 kB 254 kB ✓
withRouter.js gzip 68.4 kB 68.4 kB ✓
Overall change 1.28 MB 1.28 MB ✓

Commit: 8945cbc

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@arunoda @impronunciable @tomasdev @nkzawa @tommyka @ccorcos @queckezz @ijjk