NavbarNavLink.js 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. import React from 'react';
  2. import Link from '@docusaurus/Link';
  3. import useBaseUrl from '@docusaurus/useBaseUrl';
  4. import isInternalUrl from '@docusaurus/isInternalUrl';
  5. import {isRegexpStringMatch} from '@docusaurus/theme-common';
  6. import IconExternalLink from '@theme/Icon/ExternalLink';
  7. export default function NavbarNavLink({
  8. activeBasePath,
  9. activeBaseRegex,
  10. to,
  11. href,
  12. label,
  13. html,
  14. isDropdownLink,
  15. prependBaseUrlToHref,
  16. ...props
  17. }) {
  18. // TODO all this seems hacky
  19. // {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
  20. const toUrl = useBaseUrl(to);
  21. const activeBaseUrl = useBaseUrl(activeBasePath);
  22. const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
  23. const isExternalLink = label && href && !isInternalUrl(href);
  24. // Link content is set through html XOR label
  25. const linkContentProps = html
  26. ? {dangerouslySetInnerHTML: {__html: html}}
  27. : {
  28. children: (
  29. <>
  30. {label}
  31. {isExternalLink && (
  32. <IconExternalLink
  33. {...(isDropdownLink && {width: 12, height: 12})}
  34. />
  35. )}
  36. </>
  37. ),
  38. };
  39. if (href) {
  40. return (
  41. <Link
  42. href={prependBaseUrlToHref ? normalizedHref : href}
  43. {...props}
  44. {...linkContentProps}
  45. />
  46. );
  47. }
  48. return (
  49. <Link
  50. to={toUrl}
  51. isNavLink
  52. {...((activeBasePath || activeBaseRegex) && {
  53. isActive: (_match, location) =>
  54. activeBaseRegex
  55. ? isRegexpStringMatch(activeBaseRegex, location.pathname)
  56. : location.pathname.startsWith(activeBaseUrl),
  57. })}
  58. {...props}
  59. {...linkContentProps}
  60. />
  61. );
  62. }