Question

我有一个仅在启动时加载空白页面的应用程序，但是刷新页面会使其正确加载。

这是我正在尝试的：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './Assets/css/app.css';
import { BrowserRouter } from 'react-router-dom';

import App from './App';

window.processIntent = intent => {
    ...cordova stuff
};

window.setupAltIntent = () => {
    ...cordova stuff
};

function startApp() {
    window.intentUrlToPrint = '';
    window.setupAltIntent();

    ReactDOM.render(
        <BrowserRouter>
            <App />
        </BrowserRouter>,
        document.getElementById('root')
    );
}

if (!window.cordova) {
    startApp();
} else {
    document.addEventListener('deviceready', startApp, false);
}

App.js

import React, { Component } from 'react';
import AppActivity from './Views/activity/AppActivity';
import Header from './Components/header';
import AppRouter from './AppRouter';

class App extends Component {
    componentDidMount() {
        if (navigator.splashscreen) {
            navigator.splashscreen.hide();
        }
    }

    render() {
        return (
            <div>
                <div>
                    <Header />
                    <AppRouter />
                </div>
                <AppActivity />
            </div>
        );
    }
}

export default App;

AppRouter.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';

import Home from './Pages/Home';
import Contact from './Pages/Contact';
import LogInForm from './Pages/RegisterAndLogin/LogIn';

const AppRouter = () => (
    <div>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/contact" component={Contact} />
            <Route path="/login" component={LogInForm} />
        </Switch>
    </div>
);
export default AppRouter;

Header.js

import React, { Component } from 'react';
import HeaderNotLoggedIn from './Headers/HeaderNotLoggedIn';
import HeaderLoggedIn from './Headers/HeaderLoggedIn';

class Header extends Component {
    constructor(props) {
        super(props);
        this.isLoggedOn = this.isLoggedOn.bind(this);
    }

    isLoggedOn() {
        return localStorage.getItem('user');
    }

    render() {
        const header = this.isLoggedOn() ? <HeaderLoggedIn /> : <HeaderNotLoggedIn />;
        return <div>{header}</div>;
    }
}

export default Header;

反应很新，这里我想念什么吗？

为什么应用程序只能在页面刷新时正确加载？

Answer 1

我没有办法解决您的确切问题，因为我无法访问很多组件，逻辑和连接，因此我不得不做出猜测。我假设setupAltIntent返回了一个承诺（尽管是否做其他事情并不完全重要）。在App中，我将其设置为一旦数据加载到状态中即有条件地呈现Header，这种情况发生在承诺被解决后调用setState时。

希望这能使您走得足够远，找出您自己的解决方案真正需要什么。

链接到我的解决方案：

初始页面加载为空-create-react-app

1 个答案: