페이지 새로 고침에서 반응이 올바르게 렌더링되지 않습니다.

Question

내 반응 프로젝트에서 개미 디자인과 서버 쪽 렌더링을 사용하고 있습니다. 내 헤더는 사용자 인증 상태에 따라 렌더링됩니다. 사용자가 인증되면 appHeader가 사용됩니다. 전체 페이지로드 (내가 링크 회원 페이지로 집에서 이동 평균)은 클래스 이름과 정확한 렌더링하지만 페이지 헤더에 추가하지이 클래스를 새로 고침에

import React, { Component } from 'react' 
import { connect } from 'react-redux' 
import { Layout, BackTop, Button } from 'antd' 
import LandingHeader from './_Landing/Header/LandingHeader' 
import AppHeader from './Common/AppHeader' 
import { withRouter } from 'react-router-dom' 
import { bool, object } from 'prop-types' 

const { Content, Footer } = Layout; 

class AppLayout extends Component { 
    constructor (props) { 
    super(props) 
    this.state = {} 
    } 

    render() { 
    const { children, location } = this.props 

    const isLoggedIn = this.props.isAuthenticated 
    let AppHeaderConditional = null 
    if (isLoggedIn && location.pathname != '/' && location.pathname != '/login' && location.pathname != '/signup') { 
     AppHeaderConditional = <AppHeader /> 
    } else { 
     AppHeaderConditional = <LandingHeader /> 
    } 

    return (
     <div className='landing-page-wrapper' data-pathname={`${location.pathname}`}> 
     {AppHeaderConditional} 
     <Layout> 
      <Content> 
      {children} 
      </Content> 
     </Layout> 
     <BackTop> 
      <Button type='primary' shape='circle' icon='up-circle-o' size='large' /> 
     </BackTop> 
     <Footer className='footer' style={{ textAlign: 'center' }} > 
      © 2017 - 
     </Footer> 
     </div> 
    ) 
    } 
} 

AppLayout.propTypes = { 
    isAuthenticated: bool, 
    children: object, 
    location: object 
} 

const mapStateToProps = state => { 
    return { 
    isAuthenticated: state.user.isAuthenticated 
    } 
} 

export default withRouter(connect(mapStateToProps)(AppLayout)) 

. 콘솔 로그에 "경고 : 서버 HTML에 ...이 포함될 것으로 예상하지 못했습니다."라는 오류 메시지가 표시됩니다.

이 콘솔 경고에 대한 조사를했지만 나에게 도움이되지 않았습니다. 나는 순수하게 노력했다 : false (https://github.com/reactjs/react-redux/blob/master/docs/troubleshooting.md), 그리고 다른 것들은 문제를 해결할 수 없다.

Answer 1

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/server-rendering.md 내가 해결책을 발견 -

Answer 2

당신은 클라이언트에서 서버와 browserRouter에 staticRouter을 사용해야합니다. 필요한 것은 아래에 있습니다. 어떻게 든 페이지가 클라이언트에서 두 번째로 렌더링되기 때문에, 나는 왜 그런지 모르지만 해결책입니다.

componentDidMount() { 
    this.setState({ mounted: true }) 
}