새로 고침 또는 뒤로 가기 버튼을 눌렀을 때 AppBar 내용이 잘못되었습니다.

Question

Material-UI로 ReactJS를 사용하고 있는데 사용하기에 상당히 익숙합니다.

메인 메뉴/탐색 모음으로 사용되는 AppBar 구성 요소가 있습니다. AppBar 구성 요소의 제목을 내가있는 페이지를 반영하고 싶습니다. 따라서 사용자를/login으로 연결하는 버튼을 누르면 AppBar 구성 요소의 제목을 "로그인"으로 변경하려고합니다. 나는 이것을 성취했지만 몇 가지 부작용이있는 것 같아서 그것이 적절한 처방이라고 생각하지 않습니다. 순간

, 내 AppBar 구성 요소가 너무과 같습니다

constructor(props, context) { 
    super(props, context); 
    this.switchToLogin = this.switchToLogin.bind(this); 

    this.state = { 
     appBarTitle: 'Home', 
     appBarIcon: false 
    }; 
} 

: 그리고 내 생성자에서

render() { 
    let MenuOptionsNotLogged = ({}) => (
     <div> 
      <FlatButton 
       label="Log In" 
       containerElement={<Link to="/login" />} 
       secondary 
       linkButton 
       onClick={this.switchToLogin} 
      /> 
     </div> 
    ); 
    return (
     <div> 
      <MuiThemeProvider muiTheme={muiTheme}> 
       <div className="headerDiv"> 
        <AppBar 
         className="appBar" 
         showMenuIconButton={this.state.appBarIcon} 
         title={this.state.appBarTitle} 
         iconElementRight={<MenuOptionsNotLogged />} 
         iconElementLeft={<IconButton><BackIcon /></IconButton>} 
        /> 
       </div> 
      </MuiThemeProvider> 
     </div> 
    ); 

, 나는 AppBar의 기본 상태 (제목과 아이콘)을 설정 사용자가 로그인 페이지로 이동할 때 제목과 아이콘을 변경하는 기능이 있습니다.

문제가

이 '작동'하지만 사용자가 브라우저에서 뒤로 버튼을 새로 고치거나 누르는 경우에는 몇 가지 문제가 있습니다.

예. 사용자가/login으로 이동하고 제목이 "Login"으로 변경되면 사용자가 브라우저를 새로 고칩니다. 그러면 사용자는/로그인되지만 제목은 "집"으로 재설정됩니다.

뒤로 버튼과 동일한 문제가 발생합니다. 사용자는 로그인으로 돌아갈 수 있으며 뒤로 밀면 제목은 "집"과 반대로 "로그인"으로 유지됩니다.

Answer 1

나는 Link 구성 요소를 보았습니다. 내 대답은 당신이 react-router을 사용한다고 가정합니다.

appBarTitle 상태가 현재 경로와 올바르게 매핑되지 않았습니다. 또한 사용자가 브라우저를 새로 고치면 state 구성 요소가 재설정됩니다.

reat-router 3.0을 사용하지 않는 경우 this.context.location.pathname을 통해 현재 경로에 액세스 할 수 있습니다. contexthere을 사용하는 방법에 대해 읽어야합니다.

그런 다음 경로 이름을 표시 할 텍스트에 매핑하는 도우미 함수를 작성할 수 있습니다. '/login' -> 'Login', '/' -> 'Home'.

AppBar의 title은 도우미 함수에서 반환 된 값일 수 있습니다. 당신은 더 이상 그 주를 그 주에 두지 않아도됩니다.

Reactjs는 프로그래밍과 관련된 선언적인 스타일이므로 'switchToLogin then login title'을 사용하지 않는 것이 좋습니다. 방법보다는 렌더링 할 부분을 구성 요소에 알립니다.