Setting Up Routing & Routes

README.md

@@ -70,3 +70,4 @@ Firebase Common API Endpoint: <https://burger-builder-ram.firebaseio.com/>
 ### Adding Routing using `react-router`
 
 1. Building the `<Checkout />` & `<CheckoutSummary />` Components: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/bb4ab26d36667835423c08ca13c66db4be548c82)
+2. Setting Up Routing & Routes **`npm i --save react-router-dom`**: [Commit Details]()

package.json

@@ -10,7 +10,9 @@
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "^3.4.3",
     "styled-components": "^5.1.1"
   },
   "scripts": {

src/App.js

@@ -1,5 +1,6 @@
 // LIBRARY IMPORTS
 import React, { Component } from 'react';
+import { Route, Switch } from 'react-router-dom';
 
 // CUSTOM COMPONENTS
 import Layout from './components/Layout/Layout.component';
@@ -11,8 +12,10 @@ class App extends Component {
     return (
       <div>
         <Layout>
-          <BurgerBuilder />
-          <Checkout />
+          <Switch>
+            <Route path="/checkout" component={Checkout} />
+            <Route path="/" component={BurgerBuilder} />
+          </Switch>
         </Layout>
       </div>
     );

src/index.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
-  <App />,
-  document.getElementById('root')
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+  document.getElementById("root")
 );
 
 // If you want your app to work offline and load faster, you can change