Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Compose UI-library Link with router Link via the polymorphic `component` prop
Render a UI-library Link through the router's Link using `component={RouterLink}` instead of nesting them with legacy passthrough flags.
Bad example
| 1 | const Hyperlink = ({ href, children, anchorProps, ...props }) => ( |
| 2 | <RouterLink href={href} {...props} passHref legacyBehavior> |
| 3 | <UiLink {...anchorProps}>{children}</UiLink> |
| 4 | </RouterLink> |
| 5 | ); |
Explanation (EN)
Nesting the UI Link inside the router Link relies on deprecated legacyBehavior/passHref and produces two stacked anchor-like elements, which is fragile and harder to type.
Objašnjenje (HR)
Ugnjezdivanje UI Linka unutar router Linka oslanja se na zastarjeli legacyBehavior/passHref i stvara dva ugnijezdena anchor elementa, sto je krhko i teze za tipiziranje.
Good example
| 1 | const Hyperlink = ({ href, children, anchorProps, ...props }) => ( |
| 2 | <UiLink component={RouterLink} href={href} {...props} {...anchorProps}> |
| 3 | {children} |
| 4 | </UiLink> |
| 5 | ); |
Explanation (EN)
`component={RouterLink}` tells the UI library which element to render as its root, so you keep the library's styling and API while the router handles navigation — no nesting, no deprecated flags.
Objašnjenje (HR)
`component={RouterLink}` govori UI biblioteci koji element da renderira kao korijenski, pa zadrzavas stiliziranje i API biblioteke dok router obavlja navigaciju — bez ugnjezdivanja i bez zastarjelih zastavica.
Exceptions / Tradeoffs (EN)
If the UI library's component does not support a polymorphic `component`/`as` prop, you may have to nest, but prefer the polymorphic approach whenever it is available.
Iznimke / Tradeoffi (HR)
Ako komponenta UI biblioteke ne podrzava polimorfni `component`/`as` prop, mozda ces morati ugnjezditi, ali preferiraj polimorfni pristup kad god je dostupan.