withRouterに反応し、空返すように小道具を解決

+ナビゲーションバーに書かれたantdフレームワークを反応させ利用する場合、いくつかのピットを満たし、何の問題もなくケースのメニュークリックで一次および二次レベルのメニュー、ハイライトされているが、ときに、ブラウザの戻るボタンをクリックして、それが間違っていました。

1.二次メニュー、我々はantdナビゲーションバーを取得することができ、対応するselectdKeysに異なるハッシュ値を割り当てることによって、props.history経由のルートを監視することができます。

2.メニューは、小道具をプリントアウトしているため、空のオブジェクトがルート変更、ブラウザのエラー、あなたがwithRouterを使用する必要があり、この時間に耳を傾け、メニューを取得することで、同様の問題を有していてもよくその使用は次のとおりです。

インポートは、{コンポーネントを}リアクトから ' 反応する' 
インポート' ../css/movie-app.css ' 

// 导入路由 
インポート{ルート、リンク、withRouterを} から ' 反応-ルータ-DOM ' 

インポートホームから 「./home 「
インポート作品から 」./movie 「
についてインポートから 」./about 「

インポート{レイアウト、メニュー} から 」antd " 
のconst {ヘッダー、コンテンツ、フッタは} = レイアウト

クラスMovieAppは{コンポーネントを拡張します

  コンストラクタ（小道具）{ 
    スーパー（小道具）
    にconsole.log（小道具）// このオブジェクトが空でない、及び経路を聞くことができるプリントアウト
    CONST =ハッシュprops.location.pathname
     この .STATE = { 
      ハッシュ：SELを.startsWith（' /映画'？）' /映画/ in_theaters ' ：ハッシュ
    } 

    props.history.listen（ルート > = {
       CONSTハッシュ= route.pathname
       この.setState（{ 
        SEL：hash.startsWith（' /映画'） ？' /映画/ in_theaters '：ハッシュ
      }）
    }）
  } 

  レンダリング（）{ 
    リターン（
       <レイアウトクラス名= " レイアウト" > 
        <ヘッダ> 
          <DIVクラス名= " ロゴ" /> 
          < メニュー
            テーマ = " 暗い" 
            モード = " 水平" 
            selectedKeys = {[ この.state.sel]} 
            スタイル = {{表示：' インラインブロック'、幅：300、lineHeight：' 64px ' }}
           > 
            <Menu.Itemキー= " / " > 
              <リンクに= " / " >首页</リンク> 
            </Menu.Item> 
            <Menu.Itemキー= " /映画/ in_theaters " > 
              <リンクに= " /映画/ in_theaters " >电影</リンク> 
            </Menu.Item> 
            <Menu.Itemキー= " /について" > 
              <リンクに= "/について" > </リンク>について 
            </Menu.Item> 
          </メニュー> 
        </ヘッダ> 
        <コンテンツスタイル= {{パディング：' 0は50px ' }}> 

          <ルートパス= " / "正確な成分= {ホーム}> </ルート> 
          <ルートパス= " /映画"コンポーネント= {作品}> </ルート> 
          = <ルート・パス" /について"コンポーネント= {について}> </ルート> 

        </コンテンツ> 
        <フッターのスタイル= {{textAlign：' センター' }} >フッターAntのデザイン© 2018 AntのUEDによって作成された</フッタ> 
      </レイアウト> 
    ） 
  } 
} 

輸出デフォルト withRouter（MovieApp）

内部withRouterは、ルーティングタグ（<ルータ> </ルータ>）に置かなければならないことに注意してください、またはエラーになります！！！

空のルートを聞くことができないという問題点を解決するための小道具を書きます

withRouterに反応し、空返すように小道具を解決

おすすめ