lex-node · lex-node · Aug 8, 2019 · Aug 8, 2019 · Aug 8, 2019 · Aug 8, 2019
diff --git a/.idea/React-Router-Basic-Nav.iml b/.idea/React-Router-Basic-Nav.iml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/README.md b/README.md
@@ -19,24 +19,24 @@ Topics:
 
 ### Steps for implementing React Router
 
-* You'll notice we've already installed react-router-dom for you.
-* `import` your BrowserRouter as Router inside your `index.js` file.
-* Wrap your `<App />` component that you're passing to `ReactDOM.render()` with your new `Router` component.
-* open up your chrome `REACT DEV TOOLS` and notice your app is now all wrapped in `BrowserRouter`
-* inside the `REACT DEV TOOLS` expand `<BrowserRouter>` and highlight `<Router>` and notice that here is a `"history"` object on props and a `"match"` object on its state. These two objects are how all of our Router is going to work. 
+X You'll notice we've already installed react-router-dom for you.
+X `import` your BrowserRouter as Router inside your `index.js` file.
+X Wrap your `<App />` component that you're passing to `ReactDOM.render()` with your new `Router` component.
+X open up your chrome `REACT DEV TOOLS` and notice your app is now all wrapped in `BrowserRouter`
+X inside the `REACT DEV TOOLS` expand `<BrowserRouter>` and highlight `<Router>` and notice that here is a `"history"` object on props and a `"match"` object on its state. These two objects are how all of our Router is going to work. 
 
 ### Steps for "Declaring" your routes
 
-* Inside of your `App.js` file `import { Route } from 'react-router-dom';`
-* This is where we're going to declare and specify our router.
-* Create 3 `<Route />` setting their `path` prop equal to `/`, `/about`, `/contact` with their respective components.
-* Be sure to incluce the `exact` prop on the root component for `/` to make sure that it's rendering the exact component and not all the other components.
+X Inside of your `App.js` file `import { Route } from 'react-router-dom';`
+X This is where we're going to declare and specify our router.
+X Create 3 `<Route />` setting their `path` prop equal to `/`, `/about`, `/contact` with their respective components.
+X Be sure to include the `exact` prop on the root component for `/` to make sure that it's rendering the exact component and not all the other components.
 
 ### Steps for setting up your Navigation
 
-* Inside of `Navigation.js` `import { Link } from 'react-router-dom'`.
-* Declare the `to` as the href on `<Link>` and specify the correct routes for your app to navigate towards.
-* Head over to your app and start navigating. You should be able to see your URLS changing their paths as you go. Each path should display the proper component. 
+X Inside of `Navigation.js` `import { Link } from 'react-router-dom'`.
+X Declare the `to` as the href on `<Link>` and specify the correct routes for your app to navigate towards.
+X Head over to your app and start navigating. You should be able to see your URLS changing their paths as you go. Each path should display the proper component. 
 
 ### Resources
 

diff --git a/package.json b/package.json
@@ -15,5 +15,17 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }
diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,17 @@
 import React from 'react';
 import './App.css';
-import { Home, About, Contact, Navigation } from './components';
+import {Home, About, Contact, Navigation} from './components';
+import {Route} from 'react-router-dom';
+
+
 
 const App = () => (
-  <div>
-    <Navigation />
-  </div>
+    <div>
+        <Navigation/>
+        <Route exact path="/" component={Home}/>
+        <Route path="/about" component={About}/>
+        <Route path="/contact" component={Contact}/>
+    </div>
 );
 
 export default App;
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
@@ -1,22 +1,26 @@
 import React from 'react';
+import {Link} from 'react-router-dom';
 
 const Navigation = () => {
-  return (
-    <div>
-      <div className="App">
-        <h1>React Router Mini</h1>
+    return (
         <div>
-          <a href="">Home</a>
+            <div className="App">
+                <h1>React Router Mini</h1>
+                <div>
+                    <Link to="/">Home</Link>
+                </div>
+                <div>
+                    <Link to="/about">About</Link>
+                </div>
+                <div>
+                    <Link to="/Contact">Contact</Link>
+                </div>
+            </div>
         </div>
-        <div>
-          <a href="">About</a>
-        </div>
-        <div>
-          <a href="">Contact</a>
-        </div>
-      </div>
-    </div>
-  );
+    );
 };
 
 export default Navigation;
+
+
+