React-Router v4.2.2 funktioniert nicht (ich glaube, ich habe etwas falsches im Route-Tag gemacht?)

Question

Ich benutze react-router v4.2.2 in meinem Projekt und versuche, eine Reihe von Karten zu erstellen jede Verbindung zu anderen Komponenten. Im Moment teste ich gerade, dass der Router funktioniert, indem ich jede Karte zu einer bestimmten Komponente "Project1" leite. Dies funktioniert jedoch nicht; Ich sehe nicht, dass das Div in der Project1-Komponente auftaucht. Was mache ich falsch?? Sollte nicht jede Karte mit der Komponente Project1 verlinken? Hier

ist der Code für den Hauptbehälter, der die Karten hält:

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 ist der Code für den Container-Linien:

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

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

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

export default connect(mapStateToProps)(Routes); 

Hier ist der Code für die index.js:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { applyMiddleware, createStore } from 'redux'; 
import ReduxPromise from 'redux-promise'; 
import { BrowserRouter } from 'react-router-dom'; 

import App from './components/App.jsx'; 
import css from '../style/style.css'; 
import style from '../style/style.css'; 
import reducers from './reducers'; 

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore); 

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> 
     <BrowserRouter> 
      <App /> 
     </BrowserRouter> 
    </Provider> 
, document.getElementById('root')); 

und der Code für Project1, die angezeigt werden soll, wenn eine Karte angeklickt wurde:

Answer 1

Wenn Sie auf einen Link klicken, navigieren Sie zu Project1, für das keine Routen definiert sind. Sie zerstören grundsätzlich Ihre Route, wenn Sie darauf lecken, weil der Switch sich in der gleichen Komponente wie der Link befindet. Die Switch-Anweisung muss in eine dritte Komponente verschoben werden, damit sie nach dem Klicken auf eine Verknüpfungskarte noch vorhanden ist.