1

我正在使用 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));
4

1 回答 1

6

将您的 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 文件之后的第二个文件，这样我的所有路线都可以看到。

于 2017-12-21T21:27:50.033 回答