javascript - 使用 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

前言:这是显示启动画面的一种非常基本的方式。我只是要强调完成这项工作所需的组件生命周期的补充。

如果你在你的 Home 组件中使用它，它会在每次 Home 挂载时渲染启动画面，为了让它发生一次，最好将它放在你的根 App 组件，因为它只会在页面加载时挂载。

首先在您的构造函数状态中添加一个用于跟踪飞溅可见性的键，如下所示:

this.state = {
  splash: true
};

然后在您的 componentDidMount 中，添加一个带有调用 this.setState 的函数的超时，无论您希望飞溅可用多长时间(请注意 Fat Arrow Syntax to维护 this 引用):

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

最后在您的渲染中，检查 splash bool 值并返回 splash div，如果它是 true，如下所示:

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

因为您使用的是 Redux，所以您可以将启动开关放在商店中并将其传递给您的应用。

要为平滑过渡添加动画，您始终可以渲染启动画面，并使用 bool 值切换一个类，使其从 View 中淡出并重新排序 zindex 或使用 React Transition Group

希望这对您有所帮助。