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组件，这使我在登录页面上遇到问题，因为尽管登录页面在那里，菜单也显示.. < / p>

Answer 1

前言：这是显示启动画面的一种非常基本的方式。我将重点介绍使其工作所需的组件生命周期的补充。

如果你在主页组件中使用它，它会在每次Home挂载时渲染一下，为了让它发生一次，它会更好地放在你的 App < / strong>组件，因为它只会在页面加载时挂载。

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

this.state = { splash: true };

然后在 componentDidMount 中添加一个Timeout，其中包含一个调用this.setState的函数，只要您希望启动它就可以使用（请注意Fat Arrow语法以保持this参考）：

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

最后在你的渲染中，检查splash boolean并返回splash div，如果它是真的那样：

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

由于您使用的是Redux，因此您可以在商店中放置启动切换并将其传递给您的应用。

要为平滑过渡添加动画，您可以始终渲染初始屏幕，并使用布尔值切换一个类，使其从视图中淡出并重新排序zindex或使用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')
);

使用IndexRoute在我的React App中设置目标网页

2 个答案: