Detecting Dynamic Routes using <Route to="/:id" /> & Passing Route

Parameters

Author: Ch-sriram

README.md

@@ -136,3 +136,4 @@ Required Dependency: **`npm i --save axios`** | **[`axios` DOCS](https://github.
 8. The `withRouter()` HOC & Route Props: [Commit Details](https://github.com/Ch-sriram/react/commit/f89ef0cbf6a77288b36bf0542c5b8dee95ca67b7)
 9. Absolute vs. Relative Paths: [Commit Details](https://github.com/Ch-sriram/react/commit/f1cb5c5df16561fba48a0731e17b32e204822a60)
 10. Styling the Active Route using `<NavLink to="<route>" exact activeClassName="<class-name>" activeStyle={<style-object>}/>` Component: [Commit Details](https://github.com/Ch-sriram/react/commit/d226ec6c421c88c5e6818e2c85e531661d48582d)
+11. Detecting Dynamic Routes using `<Route to="/:id" />` & Passing Route Parameters: [Commit Details]()

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

@@ -2,12 +2,13 @@
 import React, { Component } from "react";
 import { Route, NavLink } from 'react-router-dom';
 
-// STYLING
+// STYLING IMPORTS
 import "./Blog.css";
 
 // CUSTOM COMPONENTS
 import Posts from '../../containers/Blog/Posts/Posts';
 import NewPost from './NewPost/NewPost';
+import FullPost from './FullPost/FullPost';
 
 class Blog extends Component {
   componentDidMount() {
@@ -18,71 +19,15 @@ class Blog extends Component {
     return (
       <div className="Blog">
         <header>
-          {
-          /**
-           * Using <NavLink /> Component, we can use some extra
-           * props which allow us to define some styling for the
-           * active link, i.e., the link that's actually clicked.
-           * 
-           * Now, when we can style the links in Blog.css file, 
-           * for their respective class/id/element along with the
-           * .active class, to change the styling when the link
-           * is actually active, i.e., the contents of the route
-           * related to that link are being displayed on the 
-           * page/view.
-           * 
-           * Now, when we click on the "New Post" link, even the
-           * "Home" link is styled as if it is having the .active
-           * class, but it is actually having the .active class,
-           * and that's because the <NavLink /> applies the 
-           * .active class to every link that has the route 
-           * prefixed with the path "/". We need to get rid of 
-           * this behaviour by giving the `exact` prop to the 
-           * <NavLink /> component related to "Home" Link as 
-           * shown below.
-           */
-          }
           <nav>
             <ul>
-              <li><NavLink
-                to="/"
-                exact
-                /**
-                 * Sometimes, we might not want the default 
-                 * class, which is .active, to be the class name,
-                 * when we click the link. We might want to have
-                 * our own class name applied to the active link,
-                 * and that can be done as shown below:
-                 */
+              <li><NavLink to="/" exact
                 activeClassName="my-active"
-                /**
-                 * Because of the prop above, we have to add 
-                 * styling for the "Home" route separately to 
-                 * style it when it is active i.e., when the "/"
-                 * route (i.e., "Home") is active, the .my-active
-                 * class is the one attached to the respective 
-                 * <NavLink /> Component for the "Home" link, and
-                 * so, we style using the .my-active class inside
-                 * the Blog.css file.
-                 */
-
-                /**
-                 * We can also directly style the <NavLink />
-                 * directly in here, using inline styling, using
-                 * the activeStyle prop as shown below:
-                 */
                 activeStyle={{
                   color: '#FA923F',
                   textDecoration: 'underline'
                 }}
               >Home</NavLink></li>
-              {
-              /**
-               * Here, we don't need the `exact` prop as, there
-               * is no other link that prefixes '/new-post' 
-               * route.
-               */
-              }
               <li><NavLink to={{
                 pathname: '/new-post',
                 hash: '#submit',
@@ -91,8 +36,42 @@ class Blog extends Component {
             </ul>
           </nav>
         </header>
+        {
+        /**
+         * For every <Post /> Component we click on, we should
+         * be able to render the entire <FullPost /> Component
+         * related to the clicked <Post />.
+         * 
+         * Which is why, we set a specific Route for the 
+         * <FullPost /> to be loaded whenever the path matches
+         * some kind of an `id`, which in this case is `post.id`.
+         * handled inside the <Posts /> Component.
+         * 
+         * Therefore, we add the route for "/:id", which is 
+         * telling to the react-router that this route is a 
+         * dynamic route. Anything that's prefixed with "/" and
+         * has some string after it, will render the component 
+         * mentioned respectively.
+         * 
+         * But that would also make the "/new-post" route render
+         * the component we mention inside the route for "/:id"
+         * because now, "/new-post" is also a route which 
+         * matches the rule of the route mentioned as "/:id". 
+         * 
+         * To avoid this confusion, we can render the <Route /> 
+         * for the "/new-post" path before the <Route /> for the
+         * "/:id" path, as shown below.
+         */
+        }
         <Route path="/" exact component={Posts} />
         <Route path="/new-post" component={NewPost} />
+        <Route path="/:id" exact component={FullPost} />
+        
+        {// The following ordering of Routes won't work properly
+          // <Route path="/" exact component={Posts} />
+          // <Route path="/:id" exact component={FullPost} />
+          // <Route path="/new-post" component={NewPost} />
+        }
       </div>
     );
   }

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

@@ -1,6 +1,7 @@
 // LIBRARY IMPORTS
 import React, { Component } from 'react';
 import axios from '../../../axios'; // this is our own axiosInstance that we created earlier inside axios.js
+import { Link } from 'react-router-dom';
 
 // STYLE IMPORTS
 import './Posts.css';
@@ -39,14 +40,27 @@ class Posts extends Component {
     let posts = <p style={{ textAlign: "center" }}>Something Went Wrong!</p>;
 
     if (!this.state.error) {
-      posts = this.state.posts.map((post) => (
-        <Post
-          key={post.id}
-          title={post.title}
-          author={post.author}
-          clicked={() => this.postSelectedHandler(post.id)}
-          // {...this.props}
-        />
+      posts = this.state.posts.map(post => (
+        /**
+         * We will make every <Post /> Component a link, so that
+         * whenever it is clicked, we can use our react-router
+         * to route to a specific route as mentioned inside the 
+         * `to` prop inside the <Link /> Component seen below.
+         * 
+         * We also add the `key` prop to the <Link /> component
+         * now because it is the outermost component which is 
+         * being generated as a list of components to be 
+         * rendered onto the view, and so, every sequence of 
+         * similar components needs to have a unique `key` prop 
+         * according to rules in React.
+         */
+        <Link to={`/${post.id}`} key={post.id}>
+          <Post
+            title={post.title}
+            author={post.author}
+            clicked={() => this.postSelectedHandler(post.id)}
+          />
+        </Link>
       ));
     }
 
@@ -55,3 +69,15 @@ class Posts extends Component {
 };
 
 export default Posts;
+
+/**
+ * Now whenever we click on any <Post /> generated at the "/" 
+ * (Home) route, we can actually see that the related ID to that
+ * <Post /> (i.e., `post.id`) is appended as a route in the 
+ * address bar. 
+ * 
+ * Although, we just need to use that ID inside the route 
+ * mentioned in the address bar and then display the <FullPost />
+ * related to the <Post /> we clicked (which can be done by 
+ * extracting the route parameters).
+ */