messages NavLinks +

hipstagram/src/Content/Messages/messages.css

@@ -10,13 +10,14 @@
     padding: 10px;
 }
 
-.dialog {
-    
+.dialog a {
+    text-decoration: none;
+    color: blue;
 }
 
-/* .dialog.active {
+.dialog a.active {
     color: greenyellow;
-} */
+}
 
 .messages {
     padding: 10px;

hipstagram/src/Content/Messages/messages.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { NavLink } from 'react-router-dom';
 import './messages.css';
 
 
@@ -8,19 +9,19 @@ const Messages = () => {
         <div className='message-wrapper'>
             <div className='dialogs-items'>
                 <div className='dialog'>
-                    Oleh
+                    <NavLink to='/messages/1'>Oleh</NavLink>
                 </div>
                 <div className='dialog'>
-                    Victor
+                    <NavLink to='/messages/2'>Victor</NavLink>
                 </div>
                 <div className='dialog'>
-                    Maria
+                    <NavLink to='/messages/3'>Maria</NavLink>
                 </div>
                 <div className='dialog'>
-                    Valeriy
+                    <NavLink to='/messages/4'>Valeriy</NavLink>
                 </div>
                 <div className='dialog'>
-                    John
+                    <NavLink to='/messages/5'>John</NavLink>
                 </div>
             </div>