21 & 22 - React Router Dom

Author: codingforentrepreneurs

src/reactify-ui/package-lock.json

@@ -7,6 +7,7 @@
     "react": "^16.4.0",
     "react-cookies": "^0.1.0",
     "react-dom": "^16.4.0",
+    "react-router-dom": "^4.2.2",
     "whatwg-fetch": "^2.0.4"
   },
   "devDependencies": {

src/reactify-ui/package.json

@@ -1,13 +1,21 @@
 import React, { Component } from 'react';
+import { BrowserRouter, Route, Redirect, Switch} from 'react-router-dom'
 import logo from './logo.svg';
 import './App.css';
 
 import Posts from './posts/Posts';
+import PostDetail from './posts/PostDetail';
 
 class App extends Component {
   render() {
     return (
-      <Posts />
+      <BrowserRouter>
+          <Switch>
+            <Route exact path='/posts' component={Posts}/>
+            <Route exact path='/posts/:slug' component={PostDetail}/>
+            <Route component={Posts}/>
+          </Switch>
+      </BrowserRouter>
     );
   }
 }

src/reactify-ui/src/App.js

@@ -0,0 +1,39 @@
+import React, {Component} from 'react'
+import { Link } from 'react-router-dom'
+
+class PostDetail extends Component {
+    constructor(props){
+        super(props)
+        this.state = {
+             slug: null
+        }
+    }
+    componentDidMount(){
+        this.setState({
+                slug: null
+            })
+        if (this.props.match){
+            const {slug} = this.props.match.params
+            this.setState({
+                slug: slug
+            })
+        }
+    }
+    render(){
+        const {slug} = this.state
+        return(
+            <p>{(slug !== null) ? <div>
+
+                {slug}
+
+                <p className='lead'><Link maintainScrollPosition={false} to={{
+                    pathname: `/posts`,
+                    state: { fromDashboard: false }
+                  }}>Posts</Link></p>
+
+           </div> : "Not found"}</p>
+        )
+    }
+}
+
+export default PostDetail

src/reactify-ui/src/posts/PostDetail.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Link } from 'react-router-dom'
 
 class PostInline extends Component {
   render() {
@@ -8,7 +9,11 @@ class PostInline extends Component {
     return (
       <div>
           {post !== undefined ? <div className={elClass}>
-              <h1>{post.title}</h1>
+               <h1><Link maintainScrollPosition={false} to={{
+                   pathname:`/posts/${post.slug}`,
+                   state: {fromDashboard: false}
+               }}>{post.title}</Link></h1>
+
               <p className={showContent}>{post.content}</p>
               </div>
               : ""}

src/reactify-ui/src/posts/PostInline.js

@@ -15,11 +15,12 @@
 """
 from django.contrib import admin
 from django.views.generic import TemplateView
-from django.urls import path, include
+from django.urls import path, include, re_path
 
 
 urlpatterns = [
     path('', TemplateView.as_view(template_name='react.html')),
+    re_path(r'^posts/', TemplateView.as_view(template_name='react.html')),
     path('admin/', admin.site.urls),
     path('api/posts/', include('posts.urls'))
 ]