Comments (2)
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));
from react-hybrid.
This works. Thanks. Missed this part of the Readme: https://github.com/ui-router/react-hybrid#providing-context-to-children .
from react-hybrid.
Related Issues (20)
- Error: [$injector:unpr] Unknown provider HOT 2
- Nested views not working
- Apollo Client support HOT 2
- ui-view with default content gets wiped out
- npm WARN @uirouter/[email protected] requires a peer of react@^15.0.0 but none is installed. You must install peer dependencies yourself. HOT 1
- Issues with React 16.9.0 HOT 1
- Params not passing from react context
- Is there any plan/way in UI Router to support Angular,AngularJS,React together in a SPA HOT 1
- UIView unable to render with custom parameters HOT 3
- Error: Could not resolve '[object Object]' from state X HOT 3
- Integrating 3 frameworks
- Migrated to @ui-router from angular-ui-router, not able to route to React HOT 1
- When creating a named child state via react / UIView, name property does not get passed down HOT 3
- Add 0.2.0 example / improve docs
- No coreservices initialization HOT 1
- Update Peer Dependencies HOT 1
- onEnter function arguments must be '$transition$' and '$state$' if used in state definition HOT 2
- Going to react component throws "Unknown provider: DirectiveProvider <- Directive" HOT 1
- Support React v18.1? HOT 5
- Route to state with params doesn't work HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-hybrid.