title: react not found component always renders
body: <p>This is code for looping through routes file. Here i am creating routerconfig array an exporting from here to app.js.</p>
  
  <blockquote>
  <pre><code>import React, { Component } from 'react';
  import { Route } from 'react-router-dom';
  import routes from './routes';
  
  class RouterConfig extends Component {
    render() {
      return (
        routes.map((route) =&gt; {
          return (
            &lt;Route
              key={ route.id }
              path={ route.path }
              exact={ route.exact }
              component={ route.component }
            /&gt;
          );
        })
      );
    }
  }
  export default RouterConfig;
  </code></pre>
    
    <p>This is my route configuration file, where i have listed all routes.</p>
  
  <pre><code>import Home from '../components/home/home';
  import About from '../components/about/about';
  import Posts from '../components/posts/posts';
  import NotFound from '../components/not_found/not_found';
  
  const routes = [
    {
      path: '/',
      exact: true,
      component: Home,
      id: 'home',
    },
    {
      path: '/about',
      component: About,
      id: 'about',
    },
    {
      path: '/posts',
      component: Posts,
      id: 'posts',
    },
    {
      component: NotFound,
      id: 'not_found',
    },
  ];
  
  export default routes;
  </code></pre>
    
    <p>This is my app.js 
        import React, { Component } from 'react';
        import { Switch, Router, Route } from 'react-router-dom';
        import Header from '../header/header';
        import Footer from '../footer/footer';
        import history from '../../history';
        import RouterConfig from '../../router/browserroute';</p>
  
  <pre><code>class App extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;Router history={ history } &gt;
            &lt;div&gt;
              &lt;Header /&gt;
              &lt;Switch&gt;
                &lt;RouterConfig /&gt;
              &lt;/Switch&gt;
              &lt;Footer /&gt;
            &lt;/div&gt;
          &lt;/Router&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
    
    <p>issue is on every page i am getting not found component render. Even
    using switch with routes not getting the expected results. not sure
    why code is not working properly.</p>
    
    <p>[this is how it renders not found in every page ][1]</p>
    
    <p>[1]: <a href="https://i.stack.imgur.com/B7evW.png" rel="nofollow noreferrer">https://i.stack.imgur.com/B7evW.png</a></p>
    
    <p>on changing:</p>
  
  <pre><code>class App extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;Router history={ history } &gt;
            &lt;div&gt;
              &lt;Header /&gt;
              &lt;Switch&gt;
                &lt;Route exact path='/' component={ Home } /&gt;
                &lt;Route path='/about' component={ About } /&gt;
                &lt;Route path='/posts' component={ Posts } /&gt;
                &lt;Route component={ NotFound } /&gt;
              &lt;/Switch&gt;
              &lt;Footer /&gt;
            &lt;/div&gt;
          &lt;/Router&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  </blockquote>
  
  <p>This works fine</p>