Material-ui transition between old LeftNav menu style and the composability one with Reactjs
<p>Ok, so I am very confused about the way of making a LeftNav menu with material-ui.</p>

<p>I am new on the project and I updated reactjs and material-ui.</p>

<p>So, a lot of stuff have been deprecated about LeftNav from material-ui and I am trying to fix it.</p>

<p>Here is the menu as it was when I opened the project (with all the console warning):</p>

<pre><code>        &lt;LeftNav ref="leftNav"
             docked={false}
             style={{opacity: '0.9'}}
             menuItems={menuItems}
             onChange={this.leftNavOnChange} /&gt;
</code></pre>

<p>From this array:</p>

<pre><code>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']},
];
</code></pre>

<p>And here is what I did from what I understood about the way of doing it:</p>

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

<p>So, less warning except one : <em>using methods on left nav has been deprecated. Please refer to documentations.</em>
but not such a big deal.</p>

<p>My problem here, is that my links are not working. I am staying on the same page.
And my other main problem: all the style it had is gone. </p>

<p>So, <strong>my question is:</strong>
am I doing it right?</p>

<p>Or am I missing something owned by reactjs and / or material-ui?</p>

<p>Thanks a lot in advance for the time spent on my request.</p>