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));

Think of the Routes as just another component, it will render the result of the switch statement. You want to move the ProjectCards into the Routes as well, it is just another route. — brub, Dec 21 '17 at 21:16
thank you, I did that and moved all the routes into the app.js and now everything is fine. — user74843, Dec 21 '17 at 21:35

score 6 · Accepted Answer · edited Dec 25 '17 at 21:07

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.

Thank you so much! I moved the code from the routes container into the app.js and now everything is perfect. Thank you! — user74843, Dec 21 '17 at 21:35

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

1 Answers1