Javascript React Router v4.2.2不工作（我想我在Route标签中做错了什么？）

我在项目中使用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);

从“React”导入React；
从'react redux'导入{connect}；
从'react router dom'导入{Link}；
从“../components/project_card.js”导入ProjectCard；
从“../components/Project1.js”导入Project1；
类ProjectCards扩展React.Component{
render（）{
var projectCards=this.props.projects.map（（项目，i）=>{
返回(
);
});
返回(
{projectCards}
);
}
}
函数MapStateTops（状态）{
返回{
项目：国家项目
};
}
导出默认连接（MapStateTops）（项目卡）；

以下是Routes容器的代码：

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

从“React”导入React；
从“../components/Project1.js”导入Project1；
从'react redux'导入{connect}；
从“react router dom”导入{Route，Switch}；
类。组件{
render（）{
var createRoutes=this.props.projects.map（（项目，i）=>{
返回
});
返回(
{createRoutes}
);
}
}
函数MapStateTops（状态）{
返回{
项目：国家项目
};
}
导出默认连接（MapStateTops）（路由）；

以下是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'));

从“React”导入React；
从“react dom”导入react dom；
从'react redux'导入{Provider}；
从“redux”导入{applyMiddleware，createStore}；
从“redux承诺”导入redux承诺；
从“react router dom”导入{BrowserRouter}；
从“./components/App.jsx”导入应用程序；
从“../style/style.css”导入css；
从“../style/style.css”导入样式；
从“./reducers”导入减速机；
const createStoreWithMiddleware=applyMiddleware（ReduxPromise）（createStore）；
ReactDOM.render(
，document.getElementById（'root'）；

以及Project1的代码，单击卡片时应显示该代码：

import React from 'react';

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

export default Project1;

从“React”导入React；
常量项目1=（）=>{
返回(
你好这里是Project1
);
}
导出默认项目1；

单击链接时，您将导航到未定义路由的Project1。当你点击它时，你基本上破坏了你的路由，因为交换机和链接在同一个组件中。Switch语句需要移动到第三个组件，以便在单击链接卡后它仍然存在

我在放置管线的位置添加了一个单独的组件，最初将该组件放置在projectCards组件中，但它不起作用。然后，我将该组件放到App.js中，但它仍然无法工作。我将编辑问题以更新对代码所做的更改，并将新组件放置在那里。我现在做错了什么？哦，我知道了！我没有使用routes容器底部react router的withRouter功能，连接功能就在这里！现在它开始工作了。谢谢你的帮助