React-Router v4.2.2 Switch funktioniert nicht; immer die Hauptkomponente

Question

Ich benutze React-Router, um eine Reihe von Karten auf der Hauptseite zu anderen einzelnen Seiten zu richten. Wenn ich jedoch auf eine Karte klicke, wird die neue Seite unter dem Kartensatz gerendert, wenn ich nur die neue Seite wiedergeben möchte. Ich denke, dass das Problem damit zu tun haben könnte, dass meine App.js die Hauptseite darin enthält, aber ich weiß nicht, wo ich es hinstellen sollte, ob es einen separaten Link dazu geben sollte usw.? Ich würde mich über jede Hilfe freuen! Danke

hier ist der Code für die 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> 
     ); 
    } 
} 

hier ist der Hauptbehälter:

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

hier wird der Routen Behälter:

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 Sie Anwendungsdatei als Eintrag für alle Komponenten, zB

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

Jetzt, wenn Sie es studiert haben, werden Sie eine <Header /> Komponente bemerken, die nicht in einer Route ist. Ich habe es so gemacht, weil mein Header in meiner gesamten App konstant ist.
So stelle ich meine Route ein Ich mache meine Route die zweite Datei nach der Datei index.js, so dass meine gesamte Route sichtbar ist.