Define Parent/Child Relationship?

[joncursi]

Is it possible to define a route as a child of another, similar to react router? I.e. something like:

export const router = createRouter(() => ({
  componentA: () => ComponentA, // normal definition
  componentB: () => <Parent><ComponentB/></Parent>, // render ComponentB as a child of Parent
  componentC: () => <Parent><ComponentC/></Parent>, // render ComponentC as a child of Parent
}));

[joncursi]

When I attempt the above, I get:

[joncursi]

The use case for this is having a container component that sets the Navigation header for each of its children, rather than having to define the same exact navigation header for each individual child (technical debt?).

[chirag04]

for the usecase you mentioned, you can use https://github.com/exponentjs/ex-navigation/blob/79d9a6e4d787a60d76b15936f3a252e453eb92df/src/ExNavigationConnect.js#L8

[joncursi]

@chirag04 is there an example somewhere on how to use hoistStatics? I'm having a hard time making sense of hoistStatics in the src. Thanks!

[sibelius]

@joncursi hoistStatics will just copy all staticproperties of your component that is non react specific

for instance:

class MyComponent extends Component {
    static route = {
        navigationBar: {
          title: 'MyComponent',
        },
    };
}

hoistStatics will copy static route to the connect component, so ExNavigation can use it

@joncursi could u post ur solution here? or close the issue then?

[joncursi]

I haven't come up with a solution for this yet because I'm not sure how the mentioned hoistStatics solves the question I asked in this thread. @chirag04 can you show me an example?