Detail base

src/components/BrowseComponent.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import BeldenLogo from "../assets/images/belden-white.png";
 import DefaultPartImg from "../assets/images/part.png";
+import { NavLink } from "react-router-dom";
 import "../assets/stylesheets/browse.scss";
 
 class cable {
@@ -28,7 +29,7 @@ class cable {
 
   returnDiv() {
     return (
-      <div className="browse-cable">
+      <NavLink className="browse-cable" to={"/cable/" + this.part_number}>
         <img className="browse-cable-image" src={this.image} alt="Cable" />
         <div className="browse-cable-label">
           <div className="browse-cable-name">{this.name}</div>
@@ -42,7 +43,7 @@ class cable {
           </div>
         </div>
         <span className="browse-cable-arrow">{">"}</span>
-      </div>
+      </NavLink>
     );
   }
 }
@@ -56,14 +57,8 @@ export default class BrowseComponent extends Component {
   }
 
   componentDidMount() {
-    this.props.socketHandler.sendMessage(
-      '{"type":"cable_map","call":"request","data":{}}'
-    );
-
-    this.props.socketHandler.socket.addEventListener(
-      "message",
-      this.handleMessage
-    );
+    this.props.socket.send('{"type":"cable_map","call":"request","data":{}}');
+    this.props.socket.addEventListener("message", this.handleMessage);
   }
 
   handleMessage = (event) => {
@@ -102,10 +97,7 @@ export default class BrowseComponent extends Component {
   }
 
   componentWillUnmount() {
-    this.props.socketHandler.socket.removeEventListener(
-      "message",
-      this.handleMessage
-    );
+    this.props.socket.removeEventListener("message", this.handleMessage);
   }
 
   render() {