Usage questions: frint-router, regions and updating regions

[fahadsuhaib]

I couldn't understand the following things based on the guides, so raising an issue ticket here,

Question 1: The guides and examples are defining two different approaches with regions n routes, but never used both. What is the ideal way to use them both? I see there is an "app" props,

https://github.com/frintjs/frint/blob/master/examples/router/root/components/Root.js

Question 2: How to replace a region with another component dynamically (multi:false)? Consider I have a "content" region and I would be loading with and after some UI actions load .

[fahad19]

Question 1: The guides and examples are defining two different approaches with regions n routes, but never used both. What is the ideal way to use them both? I see there is an "app" props,

Routes react to the URLs in your browser. And based on that, it renders Components or Apps.

Regions are defined with specific names, like sidebar or footer for example. They have nothing to do with URLs/Routes. Whenever a Region is active, and there is a registered Child App targeting that Region, that particular App will render there.

[fahad19]

Question 2: How to replace a region with another component dynamically (multi:false)? Consider I have a "content" region and I would be loading with and after some UI actions load .

In the end, Region is just a component. You can add conditions in your JSX like this:

function MyComponent(props) {
  return (
    <div>
      {props.showSidebar && <Region name="sidebar" />}

      {!props.showSidebar && <SomeOtherComponent />}
    </div>
  );
}

[fahadsuhaib]

Thanks on Q1, on Q2 I was not very clear :), What I mean is there is already a that registers with the region='sidebar', Can I load another to the same region='sidebar'?

[fahad19]

@fahadsuhaib: yes, you can register as many Child Apps as you want, and multiple Apps can target the same Region too. if ordering concerns you, you can pass additional weight info.

// first child app
window.app.registerApp(FooApp, {
  regions: ['sidebar'],
  weight: 5,
});

// second child app
window.app.registerApp(BarApp, {
  regions: ['sidebar'],
  weight: 10,
});

The less the weight, the higher they appear inside the Region.

[fahadsuhaib]

Thanks! this works well.