Fluent UI React commandbar usestate not possible

Here’s what’s working for me with the same command bar component.

You have to make sure your router is setup as HashRouter and the path properties of your <Route/> s are setup like /#properties through the href property of the button – and not through onClick.

We have the routes file describing the routes:

/* routes.js */
export const Routes = {
   Properties: 'properties'
}

We have this file, describing the contents of the command bar.

/* commandBarItems.js */

import Routes from './routes'
// IMPORTANT - CHECK OUT THE HREF PROP
const PropertiesButton = { key: Routes.Properties, name: 'Properties', href: `#${Routes.Properties}` };

export const CommandBarItems = { menu: [PropertiesButton] }

We have the app.js where you setup the hash router and the command bar component.

/* app.js */
import React, { Component } from 'react';
import { HashRouter as Router, Route } from "react-router-dom";
import { Fabric, initializeIcons, CommandBar } from 'office-ui-fabric-react';
import { PropertiesComponent } from './whichever-file-or-module';
import Routes from './routes';
import CommandBarItems from './commandBarItems';

class App extends Component {
    constructor() {
        super();
        initializeIcons();
        ...
    }

    render() {
        return (
          <div>
            <Fabric>
              <Router>
                <React.Fragment>
                  <CommandBar items={CommandBarItems.menu} farItems={CommandBarItems.farItems}/>
                  <Route path={`/${Routes.Properties}`} component={PropertiesComponent} />
                </React.Fragment>
              </Router>
             </Fabric>
            </div>
          );
     }
}