react-router v4.2.2 Switch isn't working; always showing the main component

Question

I'm using react-router to direct a set of cards on the main page, to other individual pages. However, when I click on a card, the new page renders underneath the set of cards, when what I want is to render ONLY the new page. I think the problem may have to do with that my App.js holds the main page inside it, but I don't know where I should put it, if there should be a separate link to it, etc? I would appreciate any help! Thank you

here is the code for the App.js

import React from 'react';
import Routes from '../containers/routes.js';
import ProjectCards from '../containers/project_cards.js';

export default class App extends React.Component {
    render() {
        return(
            <div>
                <ProjectCards />
                <Routes />
            </div>
        );
    }
}

here is the main container:

import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import ProjectCard from '../components/project_card.js';
import Project1 from '../components/project1.js';

class ProjectCards extends React.Component {
    render() {
        var projectCards = this.props.projects.map((project, i) => {
            return (
                <div key={i}>
                    <Link to={`/${project.title}`}>
                        <ProjectCard title={project.title} date={project.date} focus={project.focus}/>
                    </Link>
                </div>
            );
        });
        return (
            <div>{projectCards}</div>
        );
    }
}

function mapStateToProps(state) {
    return {
        projects: state.projects
    };
}

export default connect(mapStateToProps)(ProjectCards);

here is the routes container:

import React from 'react';
import Project1 from '../components/project1.js';
import { connect } from 'react-redux';
import { Route, Switch } from 'react-router-dom';
import { withRouter } from 'react-router';

class Routes extends React.Component{
    render() {
        var createRoutes = this.props.projects.map((project, i) => {
            return <Route key={i} exact path={`/${project.title}`} exact component={Project1}/>
        });
        return (
            <Switch>
                {createRoutes}
            </Switch>
        );
    }
}

function mapStateToProps(state) {
    return {
        projects: state.projects
    };
}

export default withRouter(connect(mapStateToProps)(Routes));

Answer 1

Set you App file as entry for all components e.g

import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

import Home from '../../ui/components/user/home/Home.jsx';
import Header from './header/Header.jsx';
import Fakebook from '../../ui/components/user/fakebook/Fakebook.jsx';
import Dashboard from '../../ui/components/user/dashboard/Dashboard.jsx';
import NotFound from '../../ui/pages/NotFound.jsx';

export default class App extends Component{
   render(){
     return (
       <BrowserRouter>
         <div>
         <Header />
           <Switch>
              <Route exact path="/" component={Fakebook}/>
              <Route exact path="/Home" component={Home}/>
             <Route exact path="/Dashboard" component={Dashboard} />
             <Route exact path="/Dashboard/:userId" component={Dashboard}/>
             <Route component={NotFound}/>
           </Switch>
         </div>
       </BrowserRouter>
     )
   }
 }

Now if you studied it you will notice a <Header /> component which is not in a route. I did it that way because my header is constant across my whole app.
This is how I setup my route I make my Route the second file after the index.js file so all my route can be visible.