Rendering Components for Routes using render and component prop

inside the `<Route />` Component

Author: Ch-sriram

README.md

@@ -128,3 +128,4 @@ Required Dependency: **`npm i --save axios`** | **[`axios` DOCS](https://github.
 2. Setting Up The Router Package `npm i --save react-router react-router-dom`: [Commit Details](https://github.com/Ch-sriram/react/commit/64ef82a4d09d2b0561861764c73a717fd754f4e4)
 3. Preparing the Project for Routing &mdash; Making `<NewPost />`, `<FullPost />` & `<Posts />` Components as a Container for Proper Routing: [Commit Details](https://github.com/Ch-sriram/react/commit/e8d0a46e2892af940f600481cba861393dca051b)
 4. Setting Up and Rendering Routes using `path`, `exact` & `render` attributes inside the `<Route />` Component: [Commit Details](https://github.com/Ch-sriram/react/commit/0ae8809410db1d704c99ab3b61a7a6d8e906b0f2)
+5. Rendering Components for Routes using `render` and `component` prop inside the `<Route />` Component: [Commit Details]()

http-ajax-routing/src/containers/Blog/Blog.js

@@ -26,15 +26,13 @@ import Posts from '../../containers/Blog/Posts/Posts';
  */
 
 /**
- * Instead of hard-coding the components to be rendered onto 
- * the home "/" route, we can render the components dynamically
- * using the <Route /> component, in which we define the `path`
- * and `render` props. For a certain `path` we define, we can 
- * also define the `exact` prop to be true/false depending on
- * how we want to render the components, whether we want to 
- * render the components on the specified path exactly, or we 
- * might not want to render the components on the specified 
- * path exactly. 
+ * Instead of rendering the components directly using the 
+ * `render` prop, we will use the `component` prop inside the 
+ * <Route /> Component to give the `component` prop a reference
+ * to the component we want to render at that exact specified
+ * route in the `path` prop of the <Route /> Component.
+ * 
+ * The example is shown below.
  */
 
 class Blog extends Component {
@@ -49,23 +47,26 @@ class Blog extends Component {
             </ul>
           </nav>
         </header>
-        <Route path="/" exact render={() => <h1>Home</h1>}/>
-        <Route path="/" render={() => <h1>Home 2</h1>}/>
+        {/*<Route path="/" exact render={() => <h1>Home</h1>}/>
+        <Route path="/" render={() => <h1>Home 2</h1>}/>*/}
+        
+        {/**
+          Instead of rendering the component using the `render`
+          prop, we can render using the `component` prop as
+          shown below:
+        */}
+        <Route path="/" exact component={Posts} />
+
+        {/**
+          If we still want to use the `render` prop to render
+          the component we need onto the specified route inside
+          the path we want to render to, we'd use the `render`
+          prop as shown below:
+        */}
+        <Route path="/" exact render={() => <Posts />} />
       </div>
     );
   }
 }
 
-/**
- * Line #52's `render` prop will run every time the "/" path
- * is searched for in the browser, but Line #53's `render` prop
- * will run for every route, iff that route is not setup 
- * previously. For example, on the route "/new-post", we will
- * see the output `<h1>Home 2</h1>`, but not the output, 
- * `<h1>Home</h1>`, because `<h1>Home</h1>` (being rendered in
- * Line #52) will only be rendered when the specified path is 
- * "/", because we've already mentioned the `exact` prop to be 
- * true for that <Route /> Component.
- */
-
 export default Blog;