React-Router v4.2.2が動作しない（私はRouteタグで何か間違ったことをしたと思います）

Question

私は自分のプロジェクトでreact-router v4.2.2を使用しています。それぞれの他のコンポーネントへのリンク。今は、各カードを「Project1」という特定のコンポーネントにルーティングすることで、ルータの動作をテストしています。しかし、これは機能していません。私はProject1コンポーネントのポップアップ内のdivを見ていないよ。私は何を間違えているのですか？それぞれのカードがProject1コンポーネントにリンクするべきではありませんか？ここ

は、カードを保持する主容器用のコードである：ここ

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

は、ルートコンテナのコー​​ドである：ここ

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

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

と、カードがクリックされたときに表示されるProject1のコード：

import React from 'react'; 

const Project1 =() => { 
    return (
     <div>hello there this is Project1</div> 
    ); 
} 

export default Project1; 

Answer 1

リンクをクリックすると、Routeが定義されていないProject1に移動します。あなたはスイッチがLinkと同じコンポーネントにあるので、基本的にルートを壊します。 Switchステートメントをリンク先のカードをクリックした後でも存在するように、3番目のコンポーネントに移動する必要があります。