javascript - React Router 在客户端打印 react empty

Question

我使用服务器端渲染来提高性能，但我的客户端与服务器不同，因为我的客户端先渲染 <!-- react-empty: 1 -->而不是组件，然后在客户端检测到校验和不同后重新呈现应用程序，因此我正在失去性能。 Here我问问题在哪里描述了我的问题，经过一些调试我发现我的 Router元素在我的根组件中导致问题

render() {
    let history = browserHistory;

    if (this.props.store) {
        history = syncHistoryWithStore(browserHistory, props.store)
    }

    return (
        <Provider store={store}>
            <Router history={history} routes={routes} />
        </Provider>
    );
}

当我改变 Router简单 div元素它呈现 div，但对于 Router 它不会首先呈现我的元素，这会导致校验和不匹配并在客户端重新呈现。

这是我的路线。自从我使用延迟加载以来，我就这样写了。

export default {
    component: App,
    path: '/',
    indexRoute: { onEnter: (nextState, replace) => { replace('/sneakpeak') } },
    childRoutes: [
        {
            path: '/',
            getComponent(location, cb) {
                import('./LightApp')
                  .then(loadRoute(cb))
                  .catch(errorLoading);
            },
            childRoutes: [
                {
                    path: '/sneakpeak',
                    getComponent(location, cb) {
                        import('./SneakPeak')
                          .then(loadRoute(cb))
                          .catch(errorLoading);
                    }
                },
                {
                    path: '/prespectives',
                    getComponent(location, cb) {
                        import('./Blog')
                          .then(loadRoute(cb))
                          .catch(errorLoading);
                    }
                },
                {
                    path: '/post(/:id)',
                    getComponent(location, cb) {
                        import('./Post')
                          .then(loadRoute(cb))
                          .catch(errorLoading);
                    }
                },
                {
                    path: 'users/registration(/:token)',
                    getComponent(location, cb) {
                        import('./SignUp')
                          .then(loadRoute(cb))
                          .catch(errorLoading);
                    }
                },
                {
                    path: 'users/password/reset(/:token)',
                    getComponent(location, cb) {
                        import('./PasswordReset')
                          .then(loadRoute(cb))
                          .catch(errorLoading);
                    }
                },
                {
                    path: 'users/posts(/:tab)',
                    getComponent(location, cb) {
                        import('./PostManagement')
                          .then(loadRoute(cb))
                          .catch(errorLoading);
                    }
                },
                {
                    path: '/terms',
                    getComponent(location, cb) {
                        import('./Terms')
                          .then(loadRoute(cb))
                          .catch(errorLoading);
                    }
                },
                {
                    path: '/disclaimer',
                    getComponent(location, cb) {
                        import('./Disclaimer')
                          .then(loadRoute(cb))
                          .catch(errorLoading);
                    }
                },
                {
                    path: '/privacy',
                    getComponent(location, cb) {
                        import('./Privacy')
                          .then(loadRoute(cb))
                          .catch(errorLoading);
                    }
                },
                {
                    path: '/about',
                    getComponent(location, cb) {
                        import('./About')
                          .then(loadRoute(cb))
                          .catch(errorLoading);
                    }
                },
                {
                    path: '/faq',
                    getComponent(location, cb) {
                        import('./Faq')
                          .then(loadRoute(cb))
                          .catch(errorLoading);
                    }
                },
            ]
        },
        {
            path: '/',
            getComponent(location, cb) {
                import('./FinancialApp')
                  .then(loadRoute(cb))
                  .catch(errorLoading);
            },
            childRoutes: [
                {
                    path: 'symbol/list/:type(/:letter)',
                    getComponent(location, cb) {
                        import('./SymbolList')
                          .then(loadRoute(cb))
                          .catch(errorLoading);
                    }
                },
                {
                    path: 'symbol/info/:symbol(/:tab)',
                    getComponent(location, cb) {
                        import('./Symbol')
                          .then(loadRoute(cb))
                          .catch(errorLoading);
                    }
                },
                {
                    path: 'market(/:tab)',
                    getComponent(location, cb) {
                        import('./Market')
                          .then(loadRoute(cb))
                          .catch(errorLoading);
                    }
                },
                {
                    path: 'account(/:tab)',
                    getComponent(location, cb) {
                        import('./Account')
                          .then(loadRoute(cb))
                          .catch(errorLoading);
                    }
                },
                {
                    path: '*',
                    getComponent(location, cb) {
                        import('./NoMatch')
                              .then(loadRoute(cb))
                              .catch(errorLoading);
                    }
                }
            ]
        }
    ]
};

我认为我的代码是正确的，但如果我做错了什么，请帮助我!

提前致谢。

Answer 1

我发现了问题并回答了我之前的问题 here基本上，如果应用程序签名延迟加载，您应该像描述的那样呈现 Router 组件 here .