javascript - React-Router v4.2.2 不工作(我想我在 Route 标签中做错了什么？)

Question

我在我的项目中使用 react-router v4.2.2，并尝试创建一组卡片，每个卡片都链接到其他组件。现在我只是通过将每张卡路由到一个名为“Project1”的特定组件来测试路由器是否正常工作。然而，这是行不通的；我没有看到弹出 Project1 组件内的 div。我究竟做错了什么？？每个 Card 不应该链接到 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

当您单击一个链接时，您将导航到 Project1，它没有定义任何路由。当你点击它时，你基本上会破坏你的路线，因为 Switch 与 Link 位于同一组件中。 Switch 语句需要移动到第三个组件，以便它在单击链接卡后仍然存在。