title: How to render NotFound Component react-router-config
body: <p>I am new to react I would like to implement server side rendering with react router 4 I am using this package react-router-config to write plain routes But I don't why not found component is not rendering it always access the parents routes and in parent routes if user not authenticated they will redirected .Not found is not rendering as expected</p>
  
  <p><a href="https://i.stack.imgur.com/PAKpY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/PAKpY.png" alt="enter image description here"></a></p>
  
  <p>Code</p>
  
  <pre><code>import Home from './containers/Home';
  import PrivateLayout from './containers/PrivateLayout';
  import NewTest from './containers/NewTest'
  import TestBoard from './containers/TestBoard';
  import Profile from './containers/Profile';
  import NotFound from './containers/NotFound';
  import PublicLayout from './containers/PublicLayout';
  export default [
      {
          ...Home,
          path:'/',
          exact:true
      },
      {
          ...PublicLayout,
          routes:[
              {
                  ...Profile,
                  path:'/@:username',
                  exact:true
              },
              {
                  ...PrivateLayout,
                  routes:[
                      {
                          ...TestBoard,
                          path:'/home',
                          exact:true
  
                      },
                      {
                          ...NewTest,
                          path:'/test/:username',
                          exact:true
                      }
                  ]
              },
  
  
          ]
      },
      {
          ...NotFound,
      },
  ]
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import 'babel-polyfill';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import Routes from './Routes';
  import { Provider } from 'react-redux';
  import { createStore, applyMiddleware } from 'redux';
  import reduxThunk from 'redux-thunk';
  import { renderRoutes } from 'react-router-config';
  import { BrowserRouter ,Switch} from 'react-router-dom';
  import reducers from './reducers';
  import './index.css';
  import axios from 'axios';
  import { Map } from 'immutable';
  import CONFIG from './config'
  
  const axiosInstance = axios.create({
      baseURL:CONFIG.HOST,
      withCredentials: true
  });
  
  
  const INITIAL_STATE = window.INITIAL_STATE || {};
  
  Object
      .keys(INITIAL_STATE)
      .forEach(key =&gt; {
          INITIAL_STATE[key] = Map(INITIAL_STATE[key]);
      });
  
  
  const store = createStore(reducers,INITIAL_STATE, applyMiddleware(reduxThunk.withExtraArgument(axiosInstance)));
  
  window.store = store;
  
  ReactDOM.render(
      &lt;Provider store={store}&gt;
          &lt;BrowserRouter&gt;
              &lt;Switch&gt;
                 &lt;div&gt;{renderRoutes(Routes)}&lt;/div&gt;
              &lt;/Switch&gt;
          &lt;/BrowserRouter&gt;
      &lt;/Provider&gt;
      , document.getElementById('root'));
  </code></pre>
  
  <p>UPDATE #1</p>
  
  <p>Why different Layout ?</p>
  
  <p>I have common Header (or) Logged In Header to be showed on both profile Page and private Layout Components .To be clear Profile page will displayed even user logged out But Private Layout content will not be displayed it will be redirected </p>
  
  <p>Example Import </p>
  
  <pre><code>import React,{Component} from 'react';
  
  
  class NotFound extends Component{
      render(){
          return(
              &lt;h1&gt;Not Found&lt;/h1&gt;
          )
      }
  }
  
  export default {
      component:NotFound
  }
  </code></pre>
  
  <p>After Updating the Zarcode Answer I got an error Like this </p>
  
  <blockquote>
    <p>index.js:2177 Warning: React does not recognize the <code>computedMatch</code>
    prop on a DOM element. If you intentionally want it to appear in the
    DOM as a custom attribute, spell it as lowercase <code>computedmatch</code>
    instead. If you accidentally passed it from a parent component, remove
    it from the DOM element.
        in div (at index.js:39)
        in Switch (at index.js:38)
        in Router (created by BrowserRouter)
        in BrowserRouter (at index.js:37)
        in Provider (at index.js:36)</p>
  </blockquote>
  
  <p>And HTML Render Looked Like this</p>
  
  <p><a href="https://i.stack.imgur.com/16fXq.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/16fXq.jpg" alt="enter image description here"></a></p>
  
  <p>UPDATE #2</p>
  
  <p>I noticed wired Behaviour If I changed the notFound component inside the private routes it is working But the problem it is working for only Logged in Routes.</p>
  
  <pre><code>...
      {
                  ...PrivateLayout,
                  routes:[
                      {
                          ...TestBoard,
                          path:'/home',
                          exact:true
  
                      },
                      {
                          ...NewTest,
                          path:'/test/:username',
                          exact:true
                      },
                      {
                          ...NotFound,
                      },
                  ]
              }
  ...
  </code></pre>