question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Any NavLink label should be able to be any React component

See original GitHub issue

🚀 Feature Proposal

Right now, NavLink labels can only be a string. They should be able to be any React component to allow for more customization and styling.

Motivation

Signed in as label in Navbar.

Technical Notes

export interface NavLink extends NavItem {
  /** The link name */
  label: React.ReactElement
  /** Adds a top border to the link as a list divider */
  dividerAbove?: boolean
  /** Inserts an icon to the left of the link when a valid icon name is passed */
  icon?: string
  /** A click handle which will redirect the user to whenever it is clicked */
  onClick?: (event: React.MouseEvent<any>) => void
  /** Determines the href */
  href?: string
}

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
jackcmeyercommented, Jul 17, 2020

@morrme you’re more than welcome to take this issue! I’ve assigned you the issue

0reactions
ghostcommented, Aug 2, 2020

🎉 This issue has been resolved in version 1.16.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using React Router <NavLink> to Specify Which Element in a ...
This blog post will cover the difference between the two components and how <NavLink> can be used to specify the link that is...
Read more >
Using the Link and NavLink Components to Navigate to a Route
React -Router provides the and components, which allow you to navigate to different routes defined in the application.
Read more >
Link and NavLink components in React-Router-Dom
Anchor tags will reload the page and re-render all the components. While <Link> and <NavLink> will only re-render updated components matched ...
Read more >
React throws Warnings when nesting NavLink - Stack Overflow
Navlink components returns an anchor tag itself. You can see that yourself in devtools. That's the reason you are getting this error.
Read more >
What are the differences between NavLink, Link, and "a" in ...
The NavLink is used when you want to highlight a link as active. So, on every routing to a page, the link is...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found