旧式のLeftNavメニュースタイルとReactjsとのコンポジタビリティ間のマテリアルUI

Question

Ok、Material-uiでLeftNavメニューを作成する方法について非常に混乱しています。

私はプロジェクトで新しく、reactjsとmaterial-uiを更新しました。

このように、Material-UIからLeftNavについては、多くのものが廃止されており、修正しようとしています。私は（すべてのコンソール警告で）プロジェクトを開いたときにそれがあったとして、ここでは

メニューです：

 <LeftNav ref="leftNav" 
      docked={false} 
      style={{opacity: '0.9'}} 
      menuItems={menuItems} 
      onChange={this.leftNavOnChange} /> 

この配列から：

var menuItems = [ 
    { route: '/', text: 'Home' }, 
    { type: 'SUBHEADER', text: 'Connect' }, 
    { route: '/categories', text: 'Categories' }, 
    { route: '/icons', text: 'Icons'}, 
    { route: '/Tmp', text: 'Tmp', disabled: !Permissions['connect_v2_list_tmp']['isPermitted'] }, 
    { route: '/wizard', text: 'Wizard', disabled: !Permissions['connect_v2_analyze_spreadsheet']['isPermitted'] }, 
    { route: '/linkshortener', text: 'Link shortener'}, 
    { type: 'SUBHEADER', text: 'Visual search' }, 
    { route: '/whitelist', text: 'Whitelist', disabled: !Permissions['connect_v2_list_whitelist']['isPermitted'] }, 
    { route: '/blacklist', text: 'Blacklist', disabled: !Permissions['connect_v2_list_blacklist']['isPermitted'] }, 
    { type: 'SUBHEADER', text: 'Tmp-wise' }, 
    { route: '/viewer', text: 'Viewer', disabled: !Permissions['connect_v2_view_bw_entity']['isPermitted']}, 
]; 

そして、ここでは、私が何から何をしたかであります私はそれを行う方法についての理解：

 <LeftNav ref="leftNav" 
      docked={false} 
      style={{opacity: '0.9'}} 
      //menuItems={menuItems} 
      //onChange={this.leftNavOnChange} 
      > 
       {menuItems.map(function(items, i) { 
        if (items.route) { 
         return <MenuItem linkButton={true} href={items.route} key={i}>{items.text}</MenuItem>; 
        } else { 
         return <MenuItem data={items.type} key={i}>{items.text}</MenuItem>; 
        } 
       })} 
     </LeftNav> 

ので、1を除いてあまり警告：を、私たちは、左ナビゲーションのメソッドは廃止されました。文書を参照してください。 しかし、それほど大きな問題ではありません。

ここで私の問題は、私のリンクが機能していないということです。私は同じページにとどまっています。 私の他の主な問題は、それが持っていたすべてのスタイルがなくなったことです。

だから、私の質問は： 私はそれを正しくやっていますか？

またはreactjsやmaterial-uiが所有するものがありませんか？

ご要望にお時間をいただきありがとうございます。

Answer 1

これは私が（私が反応し、ルータを使用しています）何をすべきかです：あなたはLeftNavの外であなたのマップを移動した場合

import { browserHistory } from 'react-router'; 

handleLeftNav: function (route) { 
    browserHistory.push(route); 
    this.setState({ 
     leftNavOpen: false 
    }); 
    }, 

<MenuItem onTouchTap={() => { return this.handleLeftNav('/route/'); }}>Route</MenuItem> 

Answer 2

、あなたは、もはやこの警告を受けるべきではありません。私がLeftNavを作ったとき、私はこのパターンに従いました。あなたが報告しているエラーは発生しません。お役に立てれば。

let menuItems = menuItems.map(function(items, i) { 
     if (items.route) { 
      return <MenuItem linkButton={true} href={items.route} key={i}>{items.text}</MenuItem>; 
     } else { 
      return <MenuItem data={items.type} key={i}>{items.text}</MenuItem>; 
     } 
    }); 

    <LeftNav ref="leftNav" 
     docked={false} 
     style={{opacity: '0.9'}} 
     //menuItems={menuItems} 
     //onChange={this.leftNavOnChange} 
     > 
      { menuItems } 
    </LeftNav>