React directives don't work with hybrid app about react-hybrid

[christopherthielen]

With @uirouter/react (not react-hybrid), the router is added to the react context using the UIRouter react component. With react-hybrid, the router is automatically added to the react context when you route to a react component.

This error may show up when you're routing to AngularJS, using react2angular inside the angular component, and trying to use a @uirouter/react component such as UIView or UISref. To work around this issue, you can manually add the router to the react context for any react2angular components that use things like UISref.

Using UIRouterContextComponent

In your react2angular component that uses UISref, wrap in <UIRouterContextComponent>:

const MyComponent = () => (
  <UIRouterContextComponent>
    <div>
      <UISref to="mystate">
        <a>mystate</a>
      </UISref>
    </div>
  </UIRouterContextComponent>
)

angular.component('myComponent', react2angular(MyComponent));

Using UIRouterContext decorator

If you are using decorators (typescript or babel), you can decorate your class component:

@UIRouterContext
class MyComponent extends React.Component (
  render() {
    return (
    <div>
      <UISref to="mystate">
        <a>mystate</a>
      </UISref>
    </div>
    )
  }
}

angular.component('myComponent', react2angular(MyComponent));

[iNishant]

This works. Thanks. Missed this part of the Readme: https://github.com/ui-router/react-hybrid#providing-context-to-children .