Question

我使用react-router将主页上的一组卡片引导到其他单个页面。但是，当我点击一张卡片时，新页面会在这组卡片下方呈现，而我想要的只是渲染新页面。我认为问题可能与我的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>
        );
    }
}

这是主要容器：

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

Answer 1

将App文件设置为所有组件的条目，例如

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

现在，如果你研究它，你会注意到<Header />组件不在路线中。我这样做是因为我的标题在整个应用程序中都是不变的这就是我设置路线的方法，我将我的路线作为index.js文件之后的第二个文件，这样我的所有路线都可以看到。

react-router v4.2.2交换机不工作;始终显示主要组件

1 个答案: