reggieTheCoder · reggieTheCoder · Feb 13, 2020 · Feb 13, 2020 · Feb 13, 2020 · Feb 13, 2020
diff --git a/src/App.css b/src/App.css
@@ -1,4 +1,13 @@
+html, 
+body, 
+#root{
+  background-color: blue;
+  color: white;
+  font-weight: bold;
+}
+
 .App {
+  padding-top: 5%;
   text-align: center;
 }
 
@@ -9,3 +18,10 @@
 .nav-item {
   margin-top: 1rem;
 }
+
+.content{
+  padding-top: 5%;
+  text-align: center;
+}
+
+
diff --git a/src/App.js b/src/App.js
@@ -1,10 +1,15 @@
 import React from 'react';
 import './App.css';
 import { Home, About, Contact, Navigation } from './components';
+// Inside of your App.js file import { Route } from 'react-router-dom';
+import { Route } from 'react-router-dom';
 
 const App = () => (
   <div>
     <Navigation />
+    <Route exact path='/' component={Home}/>
+    <Route exact path='/about' component={About}/>
+    <Route exact path='/contact' component={Contact}/>
   </div>
 );
 

diff --git a/src/components/About.js b/src/components/About.js
@@ -1,5 +1,10 @@
 import React from 'react';
 
-const About = () => <h1>About</h1>;
+const About = () => 
+<div className="content">
+<img src="https://media.giphy.com/media/26FeU2tmGFSedYNxe/giphy.gif"/>
+</div>
+
+;
 
 export default About;
diff --git a/src/components/Contact.js b/src/components/Contact.js
@@ -1,5 +1,7 @@
 import React from 'react';
 
-const Contact = () => <h1>Contact</h1>;
+const Contact = () => <div className="content">
+   <img src="https://media.giphy.com/media/3o6Mb5h1UQlrtoebK0/giphy.gif"/>
+    </div>;
 
 export default Contact;
diff --git a/src/components/Home.js b/src/components/Home.js
@@ -1,5 +1,11 @@
 import React from 'react';
 
-const Home = () => <h1>Home</h1>;
+const Home = () => 
+    <div className="content">
+
+        <img src="https://media.giphy.com/media/hWXisyrFbbCm293C5F/giphy.gif"/>
+    </div>
+
+;
 
 export default Home;
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
@@ -1,18 +1,21 @@
 import React from 'react';
+//  Inside of Navigation.js import { Link } from 'react-router-dom'.
+import { Link } from 'react-router-dom';
 
 const Navigation = () => {
   return (
     <div>
       <div className="App">
         <h1>React Router Mini</h1>
+        {/* Declare the to as the href on <Link> and specify the correct routes for your app to navigate towards. */}
         <div>
-          <a href="">Home</a>
+         <Link to="/">Home</Link>
         </div>
         <div>
-          <a href="">About</a>
+          <Link to="/about">About</Link>
         </div>
         <div>
-          <a href="">Contact</a>
+          <Link to="/contact">Contact</Link>
         </div>
       </div>
     </div>

diff --git a/src/index.js b/src/index.js
@@ -3,5 +3,12 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import 'bootstrap/dist/css/bootstrap.css';
+// import your BrowserRouter as Router inside your index.js file.
+import { BrowserRouter as Router} from 'react-router-dom';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+// Wrap your <App /> component that you're passing to ReactDOM.render() with your new Router component.
+ReactDOM.render(
+    <Router>
+        <App />
+    </Router>
+    ,document.getElementById('root'));