This package enables UI-Router to route to both AngularJS components (and/or templates) and React components. Your app will be hosted by AngularJS while you incrementally migrate to React.
npm install @uirouter/react-hybridThis package enables UI-Router to route to both AngularJS components (and/or templates) and React components.
Your app will be hosted by AngularJS while you incrementally migrate to React.
``js
import { ReactAboutComponent } from "./about.component";
/// ...
$stateProvider.state({
name: 'home',
url: '/home',
component: 'ng1HomeComponent' // AngularJS component or directive name
})
.state({
name: 'about',
url: '/about',
component: ReactAboutComponent // React component class reference
});
.state({
name: 'other',
url: '/other',
template: '
`
When routing to a React component, that component can use the standard
React directives (UIView, UISref, UISrefActive) from @uirouter/react.
When routing to an AngularJS component or template, that component uses the standard
AngularJS directives (ui-view, ui-sref, ui-sref-active) from @uirouter/angularjs.
Remove angular-ui-router (or @uirouter/angularjs) from your package.json and replace it with @uirouter/react-hybrid.react
Add the and react-dom dependencies.
`json`
{
"dependencies": {
"angular": "^1.6.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"@uirouter/react-hybrid": "^1.1.0"
}
}
Note: This library supports React 16/17/18/19.
For React 16/17 support, import from @uirouter/react-hybrid/legacy.
`js
// React 18/19
import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid';
// React 16/17
// import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid/legacy';
let ng1module = angular.module('myApp', ['ui.router', UI_ROUTER_REACT_HYBRID]);
`
Your existing AngularJS routes work the same as before.
`js
var foo = {
name: 'foo',
url: '/foo',
component: 'fooComponent',
};
$stateProvider.state(foo);
var bar = {
name: 'foo.bar',
url: '/bar',
templateUrl: '/bar.html',
controller: 'BarController',
};
$stateProvider.state(bar);
`
Use component: in your state declaration.
`js`
var leaf = {
name: 'foo.bar.leaf',
url: '/leaf',
component: MyReactComponentClass,
};
$stateProvider.state(leaf);
An AngularJS can have default content.ui-view
This default content is rendered when no state is filling the with a component.ui-view
For example, a parent state may render a portal, but want Default Content to display
when no child state is active: .
The @uirouter/react-hybrid project sets the default content to an adapter component, .react-ui-view-adapter
The then renders a React .
When a state loads an AngularJS view into the AngularJS , it replaces the react-ui-view-adapter default content.
When a state loads a React Component into the React component, it is nested inside the AngularJS components like so:
`html`
// angularjs
// angularjs
In AngularJS, each provides the state context to its children elements, such as ui-sref or ui-view.ui-sref
The state context allows a to use relative links, for example.angular.element(el).data('$uiView')
AngularJS provides this context by setting hidden data on its DOM element, using .ui-view
Any nested or ui-sref fetches the context by asking for angular.element(childel).inheritedData('$uiView').
In React, each UIView provides the state context to its children elements using React context.UIView
The nested or UISref fetches the state context using the React context API.
There is some glue provided by @uirouter/react-hybrid which bridges these two context mechanisms.UIView
When a React component is rendered, it is wrapped in a UIRouterReactContext component.
The component finds the state context by looking first via React props, and second via AngularJS DOM data.
It then provides the state context to its children using React props.
The wraps a React UIView component.UIView
When the react is filled by a state's react component, the react-ui-view-adapter gets the state context for the newly filled UIView`.
It then provides that context to AngularJS components using AngularJS DOM data.