When creating a named child state via react / UIView, name property does not get passed down

[mainfraame]

I'm unable to get the name views to work on child states. From what I see, it looks like name property declared on my UIView(s) does not get passed down to the react-ui-view-adapter; it instead gets the default name ($default). I'm assuming this is why ui router is unable to render the view components.

package.json

    "@uirouter/react": "0.6.2",
    "@uirouter/react-hybrid": "0.1.0",

My route/state declarations:

{
        name: 'app.audit',
        url: '/audit',
        component: AuditPage
       // UIViews are declared here
},
{
        name: 'app.audit.orders',
        url: '/order',
        views: {
            'filters@app.audit': FiltersComponent,
            'grid@app.audit': GridComponent
        }
}

I've also tried this:

{
        name: 'app.audit',
        url: '/audit',
        component: AuditPage
       // UIViews are declared here
},
{
        name: 'app.audit.orders',
        url: '/order',
        views: {
            'filters@^': FiltersComponent,
            'grid@^': GridComponent
        }
}

UIView(s) in app.audit:

<UIView name='filters'/>

<UIView name='grid'/>

This is what the page component (AuditPage) looks like when rendered:

<react-ui-view-adapter name="$default" class="ng-scope">
    <form class="space-bottom-2">

         <!-- other form components go here... -->
         <ui-view name="filters" class="inline-view ng-scope">
             <!-- uiView: -->
             <ui-view class="ng-scope">
                 <react-ui-view-adapter name="$default" class="ng-scope">
                     <div></div>
                 </react-ui-view-adapter>
             </ui-view>
         </ui-view>

        <div class="true-grid-12 space-top-2">
            <button class="btn btn-primary" type="submit">Search</button>
            <button class="btn btn-link" type="button">Reset</button>
        </div>

    </form>

    <ui-view name="grid">
        <!-- uiView: -->
        <ui-view class="ng-scope">
            <react-ui-view-adapter name="$default" class="ng-scope">
                <div></div>
            </react-ui-view-adapter>
        </ui-view>
    </ui-view>

</react-ui-view-adapter>

Please let me know if you need any more info.

[MrJohz]

Did you solve this problem at all? I'm having similar issues, but where the ui-view directives are placed on root elements in our index.html document. The React component simply won't render at all.

[npetrini]

Hi, I'm facing this issue to, do someone have some workaround ?

[npetrini]

For others and further concerns the view declaration must be done this way in order to ui-router/react-hybrid to recognize them as ReactComponents :

{
        name: 'app.audit',
        url: '/audit',
        component: AuditPage
       // UIViews are declared here
},
{
        name: 'app.audit.orders',
        url: '/order',
        views: {
            'filters@app.audit': {
                component: FiltersComponent
            },
            'grid@app.audit': {
                component: GridComponent
            }
        }
}

This way it work like a charm