ui-router do not propagate my resolve to the component

[wilsonsergio2500]

I am pretty fresh in ui-router with react, I have a very simple example with two components. Top an Bottom

`
const Home = { name: 'top', component: () => (), url: '/' };
const Page1 = {
name: 'top.page1',
component: () => (),
resolve: [{
token: 'page1',
resolveFn: () => RootService()
}]

};
export const Routes: IStateRoute[] = [
Home,
Page1
]`

I am using axios for my http in RootService, so it simply returns axios.get('url')
then injecting my routes simply as

<UIRouter states={Routes} plugins={plugins}> <UIView/> </UIRouter>
The http fires and I can see it in my network in my web tools, if i place a loading component it even awaits for it until it resolves. nonetheless, the value of the resolve is not present in the props.resolves of the Page1 component.

I have red the documentation a couple of times and It does not seem I am missing anything.
Could you let me know what I might be doing odd?

[wilsonsergio2500]

fyi, I am actually returning a component for the top is a <Top/>
component and Page one <FirstPage/>

[elboman]

From your code it looks like the page1 state is a child of the top state, make sure there's a UIView that can render the nested one, otherwise it won't render anything.

I created a small webpackbin (https://www.webpackbin.com/bins/-Kktv-C_NIb0Ptsl_wSO) and everything works normally. Do you think you can reproduce the error/problem so I can take a better look? I don't have enough info right now.

[wilsonsergio2500]

Thank you very much Marco..
All I needed it seems was..
component: (props: any) => (<FirstPage {...props}></FirstPage>),

[elboman]

Oh, I think I understand now.

By doing component: (props: any) => (<FirstPage {...props}></FirstPage>) you are actually creating an inline stateless component that renders the FirstPage one:

() => <something /> // <- this is a stateless component

The router injects the props to the component you declare in the state definition, that's the stateless component and not FirstPage.

To fix this you should declare the state like this:

component: FirstPage,

This way you avoid creating the wrapper component.

[wilsonsergio2500]

ohhh awesome, I get it now. Thank you 👍