Javascript 使用IndexRoute在我的React应用程序中设置登录页

我正在尝试设置一个登录页，然后使用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

，我的主页和登录页会同时显示。我怎样才能做到这一点

编辑

这是我的

主页

组件，在该组件中，可能更好地实现我对登录页的要求：

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>
        );
    }
}

import React，{Component}来自'React'；
从“反应路由器”导入{Link}；
从“./Jag.jpg”导入Jag；
从“./Jag2.jpg”导入Jag2；
从“/nsplogo.jpeg”导入徽标；
var Music=React.createClass({
render:function（）{
返回(
BBB
);
}
});
导出默认类Home extends组件{
声云（）{
var SC=需要（“声音云”）；
SC.initialize({
客户id:“您的客户id”，
重定向_uri:'http://example.com/callback'
});
}
构造函数（）{
超级（）；
此.state={
第一：错，
第二点：错误，
}
this.toggleShowSquare=this.toggleShowSquare.bind（this）；
}
toggleShowSquare（属性）{
this.setState（（prevState）=>（{[property]：！prevState[property]}））
}
组件安装（）{
滚动到（0，0）
}
render（）{
返回(
AAA

this.toggleShowSquare（'showSquareOne'）}>music
节目
收藏

);
}
}

---

此外，我的应用程序有一个始终位于页面顶部的

菜单组件，这给我的登录页带来了问题，因为尽管登录页在那里，菜单也会显示..
你需要单独指定
启动路径来实现这一点

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')
);

ReactDOM.render(
//加上这个。
前言：这是显示启动屏幕的一种非常基本的方式。我只想强调为使其正常工作所需的对组件生命周期的添加

如果你在你的主页组件中使用它，它会在每次主页挂载时呈现飞溅，为了让这种情况发生一次，最好将它放在你的根应用程序组件中，因为它只会在页面加载时挂载

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

this.state = {
  splash: true
};

然后在您的组件didmount中，使用调用
this.setState
的函数添加一个超时，该函数的可用时间取决于您希望splash的可用时间（请注意用于维护
this
参考的胖箭头语法）：

最后，在渲染中，检查splash布尔值并返回splash div，如果它为true，则如下所示：

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

render（）{
if（this.state.splash）{
回溅
}
返回（…默认内容…）
}

由于您使用的是Redux，您可以将启动开关放在商店中，并将其传递给您的应用程序

要为平滑过渡添加动画，您可以始终渲染初始屏幕，并使用布尔值切换从视图淡出的类，并重新排序zindex或use

希望这能有所帮助。
您可以根据状态中的布尔值将启动屏幕粘贴在主页呈现函数的顶部，然后在一两秒钟后翻转布尔值并显示常规呈现。我相信无论从url角度还是从组织上看，此解决方案都会更干净。也许您的r之前缺少斜杠outes:
我正在考虑这样做。另外，在我的主页上，我有点击开关来显示组件，所以这对我来说更好，因为我正在尝试在我的登录页上有一个徽标，当点击它时它会显示主页。@MichaelLyonsI将发布我的
主页
组件，也许你可以帮我解决h如何做到这一点。@MichaelLyonsReact路由器教程没有指定这一点。@xDreamCoding您可以共享您正在关注的文档的链接吗？我确实希望它只加载一次，而不是每次主加载。因此，当我将它添加到我的根
app.js
中时，我应该如何在
render（）
中，而不是在
ReactDOM.render（）中
？不，不要将其添加到你的app.js，将其添加到你正在使用的根路由组件的app组件中：
从'views/app'导入app
得到它。因此，如果这是我的
app.js
。我不确定如何在我的呈现中插入登录页。让呈现函数提前返回一个div就是“注入”。如果您希望另一个组件（如
）进行渲染，只需将其导入到您的组件中，并将其放置在div中。哦，对不起，初始值必须以true开头。当前它始终为false，因此您根本看不到它。在我的示例中，我在init上将其意外设置为false。
componentDidMount() {
  setTimeout(() => {
    this.setState({splash: false});
  }, 1000); // 1000ms = 1 second
}

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