feat: fix links in navbar and dropdown

2 files changed, 10 insertions, 5 deletions

diff --git a/packages/react-shared/src/components/link.tsx b/packages/react-shared/src/components/link.tsx
index 089e6e2ba..2fb19ac11 100644
--- a/packages/react-shared/src/components/link.tsx
+++ b/packages/react-shared/src/components/link.tsx
@@ -1,13 +1,13 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Link as ReactRounterLink } from 'react-router-dom';
+import { NavLink as ReactRounterLink } from 'react-router-dom';
 import { Link as ScrollLink } from 'react-scroll';
 import * as validUrl from 'valid-url';
 
 import { LinkType } from '../types';
 import { constants } from '../utils/constants';
 
-interface BaseLinkProps {
+export interface BaseLinkProps {
     to: string;
     shouldOpenInNewTab?: boolean;
     className?: string;
@@ -18,11 +18,15 @@ interface BaseLinkProps {
     fontColor?: string;
 }
 
-interface ScrollLinkProps extends BaseLinkProps {
+export interface ScrollLinkProps extends BaseLinkProps {
     onActivityChanged?: (isActive: boolean) => void;
 }
 
-type LinkProps = BaseLinkProps & ScrollLinkProps;
+export interface ReactLinkProps extends BaseLinkProps {
+    activeStyle?: React.CSSProperties;
+}
+
+export type LinkProps = ReactLinkProps & ScrollLinkProps;
 
 export interface LinkState {}
 
@@ -94,6 +98,7 @@ export class Link extends React.Component<LinkProps, LinkState> {
                         onMouseOver={this.props.onMouseOver}
                         onMouseEnter={this.props.onMouseEnter}
                         onMouseLeave={this.props.onMouseLeave}
+                        activeStyle={this.props.activeStyle}
                     >
                         {this.props.children}
                     </ReactRounterLink>
diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts
index a693f2a36..285e1c6b4 100644
--- a/packages/react-shared/src/index.ts
+++ b/packages/react-shared/src/index.ts
@@ -3,7 +3,7 @@ export { MarkdownLinkBlock } from './components/markdown_link_block';
 export { MarkdownCodeBlock } from './components/markdown_code_block';
 export { MarkdownSection } from './components/markdown_section';
 export { SectionHeader } from './components/section_header';
-export { Link } from './components/link';
+export { Link, LinkProps } from './components/link';
 
 export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, ALink } from './types';