Fluent UI React commandbar usestate not possible - reactjs

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