Reactjs react路由器v4.2.2交换机isn'；t工作；始终显示主要组件

我使用react路由器将主页上的一组卡片定向到其他单独的页面。但是，当我单击一张卡片时，新页面将在卡片集下方呈现，而我只想呈现新页面。我认为问题可能与我的App.js将主页放在里面有关，但我不知道应该把它放在哪里，是否应该有一个单独的链接，等等？我将感谢任何帮助！多谢各位

下面是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>
        );
    }
}

从“React”导入React；
从“../containers/Routes.js”导入路由；
从“../containers/project_cards.js”导入项目卡；
导出默认类App扩展React.Component{
render（）{
返回(
);
}
}

这是主容器：

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

从“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 { 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';
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));

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

将应用程序文件设置为所有组件的条目，例如

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

import React，{Component}来自'React'；
从“react router dom”导入{BrowserRouter，Switch，Route}；
从“../ui/components/user/Home/Home.jsx”导入Home；
从“./Header/Header.jsx”导入头文件；
从“..//ui/components/user/Fakebook/Fakebook.jsx”导入Fakebook；
从“../ui/components/user/Dashboard/Dashboard.jsx”导入仪表板；
从“../ui/pages/NotFound.jsx”导入NotFound；
导出默认类应用程序扩展组件{
render（）{
返回(
)
}
}

现在，如果您研究它，您将注意到一个不在管线中的

组件。我这样做是因为我的标题在整个应用程序中是恒定的。

---

这就是我设置路线的方式。我将路线设置为index.js文件之后的第二个文件，以便所有路线都可见。

将应用程序文件设置为所有组件的条目，例如

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

import React，{Component}来自'React'；
从“react router dom”导入{BrowserRouter，Switch，Route}；
从“../ui/components/user/Home/Home.jsx”导入Home；
从“./Header/Header.jsx”导入头文件；
从“..//ui/components/user/Fakebook/Fakebook.jsx”导入Fakebook；
从“../ui/components/user/Dashboard/Dashboard.jsx”导入仪表板；
从“../ui/pages/NotFound.jsx”导入NotFound；
导出默认类应用程序扩展组件{
render（）{
返回(
)
}
}

现在，如果您研究它，您将注意到一个不在管线中的

组件。我这样做是因为我的标题在整个应用程序中是恒定的。

---

这就是我设置路由的方式。我将路由设置为index.js文件之后的第二个文件，以便所有路由都可见。

将路由视为另一个组件，它将呈现switch语句的结果。您也希望将ProjectCard移动到路由中，这只是另一个路由。谢谢，我这样做了，并将所有路由移动到app.js中，现在一切都好了。将路由视为另一个组件，它将呈现switch语句的结果。你想将ProjectCard移动到路径中，这只是另一条路径。谢谢，我这样做了，并将所有路径移动到app.js中，现在一切都好了。非常感谢！我将代码从routes容器移动到app.js中，现在一切都很完美。非常感谢。非常感谢你！我将代码从routes容器移动到app.js中，现在一切都很完美。非常感谢。