使用IndexRoute在我的React應用程序中設置着陸頁

Question

我試圖設置一個登陸頁面，然後通過React導向我的主頁。我創建了一個名爲Splash的着陸頁組件。我正在嘗試使用IndexRoute，以便我的應用程序顯示Splash作爲我的初始頁面。這是我的app.js：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, IndexRoute, hashHistory } from 'react-router'; 
import {Provider} from 'react-redux'; 
import store from '../store'; 

import App from 'views/App'; 
import Home from 'views/Home'; 
import About from 'views/About'; 
import Cart from 'views/webcart'; 

ReactDOM.render(
    <Provider store={store}> 
     <Router history={ hashHistory }> 
      <Route path='/' component={ App }> 
       <IndexRoute component={ Splash } /> 
       <Route path='about' component={ About } /> 
       <Route path='Cart' component={ Cart } /> 
       <Route path='Home' component= { Home } 
      </Route> 
     </Router> 
    </Provider>,  
    document.getElementById('app') // eslint-disable-line 
); 

這是我splash.js文件：

import React, { Component } from 'react'; 
import Woods from './woods.jpeg'; 
import Logo1 from './whitestar.png'; 


export default class Splash extends Component { 
    render() { 
     return(
      <div id='Splashwrapper'> 
       <img src={Woods}></img> 
       <img src={Logo1}></img> 
      </div>  
     ); 
    } 
} 

我的問題是我的應用程序不會在第一次顯示Splash，同時我的家庭和登陸頁面顯示。我怎樣才能做到這一點？

編輯

這是我Home組件它可能會更好什麼，我要與着陸頁：

import React, { Component } from 'react'; 
import { Link } from 'react-router'; 

import Jag from './jag.jpg'; 
import Jag2 from './jag2.jpg'; 
import Logo from './nsplogo.jpeg'; 

var Music = React.createClass({ 
     render: function() { 
      return (
       <div> 
        <h2> BBB </h2> 
       </div> 
      ); 

     } 
    }); 

export default class Home extends Component { 
    soundCloud() { 
     var SC = require('soundcloud'); 

     SC.initialize({ 
      client_id: 'YOUR_CLIENT_ID', 
      redirect_uri: 'http://example.com/callback' 
     }); 
    } 

    constructor(){ 
     super(); 
     this.state = { 
      showSquareOne:false, 
      showSquareTwo:false, 
     } 
     this.toggleShowSquare = this.toggleShowSquare.bind(this); 
    } 

    toggleShowSquare(property){ 
     this.setState((prevState)=>({[property]:!prevState[property]})) 
    } 

    componentDidMount() { 
     window.scrollTo(0, 0) 
    } 



    render() { 
     return (
      <div className='Home' id='Home'> 
       <div id="musicwrapper" className={this.state.showSquareThree?'':'invisible'}> 
        <div id='musicsquare' className={this.state.showSquareOne?'':'invisible'}> 
         <h1>AAA</h1> 
         <div id="musicpics"> 
          <img src={Jag} tabIndex="1" id='jag1'></img> 
          <img src={Jag2} tabIndex="1" id='jag2'></img> 
         </div> 
         <iframe width="560" height="315" src="" frameBorder="0" allowFullScreen></iframe> 
         <div id='Body'></div> 
        </div> 
       </div> 
       <div id='musicMenu'> 
        <ul> 
         <li id="music" onClick={()=>this.toggleShowSquare('showSquareOne')}>Music</li> 
         <li id="shows" >Shows</li> 
         <li id="collections">Collections</li> 
        </ul> 
       </div> 
      </div> 
     ); 
    } 
} 

而且，我的應用程序有一個Menu組件總是在頁面頂部，這一直給我的問題與着陸頁，因爲儘管着陸頁在那裏，菜單也顯示..

Answer 1

前言：這是顯示啓動畫面的一個非常基本的方式。我只是強調組件生命週期的補充，以使這項工作。

如果你使用這個在您的首頁組件，它會使飛濺每一次家庭坐騎，有這種情況發生一次，倒不如放在你的根應用成分，因爲它只會安裝在頁面加載。

首先在你的構造狀態添加一鍵跟蹤，像這樣飛濺的知名度：

this.state = { 
    splash: true 
}; 

然後在你的componentDidMount，添加超時與同但是長你想飛濺到調用this.setState功能可（注胖箭頭語法保持this參考）：

componentDidMount() { 
    setTimeout(() => { 
    this.setState({splash: false}); 
    }, 1000); // 1000ms = 1 second 
} 

在渲染，檢查飛濺布爾和返回的S

最後毛絨DIV如果是喜歡如此真實：

render() { 
    if (this.state.splash) { 
    return <div className="splash">Splash</div> 
    } 
    return (...Default Content...) 
} 

而且由於你使用的終極版，你可以放置飛濺切換在商店，並將其傳遞到您的應用程序。

要平穩過渡添加動畫，你總是可以呈現閃屏，並且使用布爾切換，從視圖中消失，並重新排序Z-索引或使用React Transition Group

希望這有助於類。

Answer 2

您需要指定Splash路線分開實現。

ReactDOM.render(
    <Provider store={store}> 
     <Router history={ hashHistory }> 
      <Route path='/' component={ App }> 
       <IndexRoute component={ Splash } /> 
       <Route component={Splash} /> // Add this. 
       <Route path='about' component={ About } /> 
       <Route path='Cart' component={ Cart } /> 
       <Route path='Home' component= { Home } 
      </Route> 
     </Router> 
    </Provider>,  
    document.getElementById('app') 
);