How do I render components with custom menu?

Question

I am new to HubSpot Platform, with ReactJS background so I'm used to working with components and react-router for navigation;

I came across one problem while building a website template using drag&drop module;

Basically I did not use "menu" or "advanced menu" built-in modules and decided to build navigation myself (reason was: applying custom styling, which is hard with built-in menus);

I built it, which means I have anchor tags which should change the layout after clicked; It should behave like react router: basic components of a website like Header and Footer should not change, but some modules(Components) should change depending on the url location;

I have a folder in design tools which consists of different sections; These sections include different custom modules which then I use in Drag&Drop module that is the main page that is being rendered. Has anybody had the same problem? If so, how did you manage to make it work ?

Thanks ,

I think I made the issue clear for understanding; If not, let me know and I'll try to explain better.

Answer 1

var addMenu;

componentWillMount: function() {
    addMenu = new nw.Menu();
    addMenu.append(new nw.MenuItem({
        label: 'doSomething',
        click: function() {
            // doSomething
        }
    }));
},

contextMenu: function(e) {
    e.preventDefault();
    addMenu.popup(e.clientX, e.clientY);
},

render: function(){
    return <button onClick={this.handleClick} onContextMenu={this.contextMenu}>SomethingUseful</button>
}