MenuNavLink

Author: Robert S

src/views/components/main-nav/MainNav.jsx

@@ -1,16 +1,14 @@
 import * as React from 'react';
 import { Menu, Segment } from 'semantic-ui-react';
-import { NavLink } from 'react-router-dom';
-
-const Nav = (props) => <NavLink exact={true} {...props} activeClassName="active" />;
+import MenuNavLink from './components/MenuNavLink';
 
 export default class MainNav extends React.PureComponent {
   render() {
     return (
       <Segment inverted={true}>
         <Menu inverted={true} pointing={true} secondary={true}>
-          <Menu.Item as={Nav} to="/" name="home" />
-          <Menu.Item as={Nav} to="/episodes" name="Episodes" />
+          <Menu.Item as={MenuNavLink} to="/" name="home" />
+          <Menu.Item as={MenuNavLink} to="/episodes" name="Episodes" />
         </Menu>
       </Segment>
     );

src/views/components/main-nav/components/MenuNavLink.js

@@ -0,0 +1,8 @@
+import { NavLink } from 'react-router-dom';
+import * as React from 'react';
+
+const MenuNavLink = (props) => {
+  return <NavLink exact={true} {...props} activeClassName="active" />;
+};
+
+export default MenuNavLink;