1

私は反応ルータを使用してメインページのカードセットを他の個々のページに誘導しています。しかし、私がカードをクリックすると、新しいページだけがレンダリングされるので、新しいページが一連のカードの下にレンダリングされます。私の問題は、App.jsがメインページを保持していることと関係していると思いますが、別のリンクがあればどこに置くべきかわかりません。私はどんな助けもありがとう!ここreact-router v4.2.2スイッチが機能していません。常にメインコンポーネントを表示する

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

ルートを別のコンポーネントとして考えると、switchステートメントの結果がレンダリングされます。 ProjectCardをルートにも移動したいのですが、これは別のルートです。 – brub

+0

ありがとう、私はそれをして、app.jsにすべてのルートを移動し、今はすべて正常です。 – user74843

答えて

2

設定あなたにありがとうここ

はここ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, { 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ファイルの後ろに2番目のファイルを作成するので、私のすべてのルートを見ることができます。

+0

ありがとうございました!コードをroutesコンテナからapp.jsに移動したところ、すべてが完璧でした。ありがとうございました! – user74843

関連する問題