Added 404 page for deleted article access

reactnd-readable-frontend/src/App.js

@@ -1,15 +1,14 @@
 import React, { Component } from 'react'
-import { Route, Switch, Link } from 'react-router-dom'
+import { Route, Switch, Link, Redirect } from 'react-router-dom'
 import ListPosts from './components/ListPosts'
-import NotAvailable from './components/NotAvailable'
 import Sidebar from './components/Sidebar'
 import SinglePost from './components/SinglePost'
+import NotFound from './components/NotFound'
 import { Grid, Navbar, Row, Col } from 'react-bootstrap'
 
 class App extends Component {
 
   render() {
-
     return (
       <div className="App">
         <header>
@@ -32,15 +31,14 @@ class App extends Component {
                 <Col sm={6} md={10} className="posts-display"><ListPosts /></Col>
               </Row>
             )}/>
-            <Route path='/NotAvailable' component={ NotAvailable } />
-            <Route path='/:category/:postId' render={(props) => <SinglePost {...props} />} />
-            <Route  path='/:category' render={(props) => (
+            <Route exact path='/:category/:postId' render={(props) => <SinglePost {...props} />} />
+            <Route exact path='/:category' render={(props) => (
               <Row className="show-grid">
                 <Col sm={6} md={2} className="sidebar"><Sidebar /></Col>
                 <Col sm={6} md={10} className="posts-display"><ListPosts /></Col>
               </Row>
             )}/>
-
+            <Route exact path='*' component={ NotFound } />
           </Switch>
         </Grid>
       </div>

reactnd-readable-frontend/src/components/NotFound.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+class NotFound extends Component {
+
+  render() {
+    return (
+        <div className="not-found">
+          <h3>404 page not found</h3>
+          <p>We are sorry but there is nothing to see here.</p>
+          <Link to="/">
+            Go to home.
+          </Link>
+        </div>
+      )
+    }
+}
+
+export default NotFound

reactnd-readable-frontend/src/components/SinglePost.js

@@ -4,8 +4,8 @@ import PostMain from './PostMain'
 import CommentList from './CommentList'
 import { connect } from 'react-redux'
 import { loadPostComments, getPost } from '../actions'
-import { Route, withRouter, Redirect } from 'react-router-dom'
-import NotAvailable from './NotAvailable'
+import { Route, withRouter } from 'react-router-dom'
+import NotFound from './NotFound'
 import { Row, Col } from 'react-bootstrap'
 
 
@@ -32,15 +32,12 @@ class SinglePost extends Component {
     const { posts, comments } = this.props
     const post = posts[0] || {}
     const postComments = comments[post.id] || []
-
-    if (!post.id) return (
-      <Redirect to={{ pathname: this.state.backPath }} />
-    )
-    else return (
+
+    return (
       <div>
         {
           !post.id ? (
-            <Route component={NotAvailable} />
+            <Route component={NotFound} />
           ) : (
               <div className="single-post">
                 <Row className="single-post">