Fluent UI React commandbar usestate not possible

Question

I am a newbee on Fluent UI React components. I am trying to implement React Router on the commandbar control from fluent UI react found here it is CommandBar with overflowing menu items. If I want to navigate to a different page with the menu items I use the history.push("/myLink") as explained here. But in order to get that working I would need to have access to useState in the functional component. the code looks like this:

        export const CommandBarBasicExample: React.FunctionComponent = () => {
        const [refreshPage, setRefreshPage] = useState(false);
      return (
        <div>
          <CommandBar
            items={_items}
            overflowItems={_overflowItems}
            overflowButtonProps={overflowProps}
            farItems={_farItems}
            ariaLabel="Use left and right arrow keys to navigate between commands"
          />
        </div>
      );
    };

    const _items: ICommandBarItemProps[] = [
      {
        key: 'newItem',
        text: 'New',
        cacheKey: 'myCacheKey', // changing this key will invalidate this item's cache
        iconProps: { iconName: 'Add' },
        subMenuProps: {
          items: [
            {  //first item in the menu
        key: "AddProperty",
        text: "Properties",
        iconProps: { iconName: "Add" },
        ["data-automation-id"]: "newProperty", // optional
        onClick: ()=>{handleclick()
        setRefreshPage(true);
        };
            {
              key: 'calendarEvent',
              text: 'Calendar event',
              iconProps: { iconName: 'Calendar' },
            },
          ],
        },
      },

The Problem I have is that if I use setRefreshPage(true) VS code complains that the state variable is not recognized. if I put the useState somewhere else React complaints of a illegal use of useState. How can I get useState to be usable in the const _items object?? any help would be greatly appreciated.

Answer 1

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