Question

我正在使用服务器端渲染来提高性能，但我的客户端差异来自服务器，因为我的客户端首先渲染而不是组件，然后在客户端检测到校验和不同后重新渲染app，所以我我失去了表现。 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 基本上，如果app登录延迟加载，您应该像描述here一样呈现Router组件。

React Router打印在客户端上反应为空

1 个答案: