added hash router

Author: taytestokes

README.md

@@ -14,3 +14,42 @@ In React, we can use a library called `React Router Dom` that will handle what i
 
 This will allow us to create a multi page application effect, with the lightning fast speed of a single page application.
 
+## React Router
+
+The library that we will be using to implement a routing system into our React application is called `react-router-dom`. Go ahead and install it into your project by running the terminal command
+
+```bash
+$ npm install --save react-router-dom
+```
+
+### Hash Router
+
+We will be using a specific router from react router called `Hash Router`.
+
+Now that we have `react-router-dom` installed in our project, let's go ahead and setup the router. In `index.js` we will import HashRouter.
+
+> Make sure to wrap it in curly braces!
+
+```js
+import {HashRouter} from 'react-router-dom';
+```
+
+Now since we have it imported, we want to wrap our entire application in it, so we will wrap the `HashRouter` component around our `App` component that is being rendered inside of `reactDOM.render()`.
+
+```js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+// import HashRouter
+import {HashRouter} from 'react-router-dom';
+
+ReactDOM.render(
+    // Wrap App with HashRouter
+    <HashRouter>
+        <App />
+    </HashRouter>, 
+document.getElementById('root'));
+```
+
+The goal for Hash Router is to keep our user interface in sync with what ther URL is. Meaning, that will display specific components on what the URL in our browser is.

package-lock.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-router-dom": "^5.0.1",
     "react-scripts": "3.1.1"
   },
   "scripts": {

package.json

@@ -1,26 +1,13 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { Component } from 'react'
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+class App extends Component {
+  render() {
+    return (
+      <div>
+        
+      </div>
+    )
+  }
 }
 
-export default App;
+export default App;

src/App.css

@@ -1,12 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+// import HashRouter
+import {HashRouter} from 'react-router-dom';
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+ReactDOM.render(
+    // Wrap App with HashRouter
+    <HashRouter>
+        <App />
+    </HashRouter>, 
+document.getElementById('root'));