リフレッシュ後または戻るボタンを押したときにAppBarの内容が正しくない

Question

私はReactJSをMaterial-UIで使用しています。

メインメニュー/ナビゲーションバーとして使用されるAppBarコンポーネントがあります。私は、AppBarコンポーネントのタイトルに私がいるページを反映させたいと思います。したがって、ユーザーを/ loginにルーティングするボタンを押すと、AppBarコンポーネントのタイトルを「ログイン」に変更することもできます。私はこれを達成しましたが、いくつかの副作用があるようですので、それが適切な習慣であるとは思えません。現時点で

は、私のアプリケーションバーのコンポーネントがそうのようになります。私のコンストラクタで

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> 
    ); 

、私はアプリケーションバー（タイトルやアイコン）のデフォルト状態を設定します。

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

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

そして、ユーザーがログインページに移動するときに、タイトルとアイコンを変更する機能があります。

問題

これは機能しますが、ユーザーがブラウザの[戻る]ボタンをリフレッシュまたはヒットするといくつか問題があります。

など。ユーザーは/ loginに移動し、タイトルは "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'を表示することはお勧めしません。どのようにレンダリングするかをコンポーネントに指示します。