ui-router / react-hybrid Goto Github PK

Hybrid adapter for routing to AngularJS and React components

License: MIT License

TypeScript 58.45% JavaScript 26.59% HTML 11.21% CSS 1.56% Shell 2.19%

react-hybrid's Introduction

UI-Router react-hybrid

UI-Router support for Hybrid Angular/React apps

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.

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: '<h1>Other</h1>', // AngularJS template/controller
  controller: function($scope) { /* do stuff */ }
})

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.

Getting started

Remove angular-ui-router (or @uirouter/angularjs) from your package.json and replace it with @uirouter/react-hybrid. Add the react and react-dom dependencies.

dependencies: {
  ...
  "angular": "^1.6.0",
  "react": "^15.4.0",
  "react-dom": "^15.4.0",
   ...
  "@uirouter/react-hybrid": "^0.0.8",
  ...
}

Add AngularJS module for hybrid support

import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid';
let ng1module = angular.module("myApp", ['ui.router', UI_ROUTER_REACT_HYBRID]);

Route to AngularJS components/templates

Your existing AngularJS routes work the same as before.

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);

Route to React components

Use component: in your state declaration.

var leaf = { 
  name: 'foo.bar.leaf',
  url: '/leaf',
  component: MyReactComponentClass
};
$stateProvider.state(leaf);

How it works

React and AngularJS ui-views

An AngularJS <ui-view> can have default content. This default content is rendered when no state is filling the ui-view with a component. For example, a parent state may render a ui-view portal, but want Default Content to display when no child state is active: <ui-view>Default Content</ui-view>.

The @uirouter/react-hybrid project sets the default content to an adapter component, <react-ui-view-adapter>. The react-ui-view-adapter then renders a React <UIView/>.

When a state loads an AngularJS view into the AngularJS <ui-view>, it replaces the react-ui-view-adapter default content.

When a state loads a React Component into the React <UIView/> component, it is nested inside the AngularJS components like so:

<ui-view> // angularjs
  <react-ui-view-adapter> // angularjs
    <UIView> // react
      <RoutedReactComponent/> //react
    </UIView>
  </react-ui-view-adapter>
</ui-view>

Providing "context" to children

In AngularJS, each <ui-view> provides the state context to its children elements, such as ui-sref or ui-view. The state context allows a ui-sref to use relative links, for example. AngularJS provides this context by setting hidden data on its DOM element, using angular.element(el).data('$uiView'). Any nested ui-view 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. The nested UIView 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. When a React UIView 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 <react-ui-view-adapter> wraps a React UIView component. When the react UIView 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.

react-hybrid's People

Contributors

Stargazers

Watchers

react-hybrid's Issues

Issues with React 16.9.0

Thanks for making this great module! 🙏

Is there any plans for supporting the latest version of React?https://reactjs.org/blog/2019/08/08/react-v16.9.0.html

I'm getting this error now when upgrading React from 16.8.6 and I think it's related to this module.

When react component under UIView throws an error, the error runs an infinite loop

Stackblitz:
https://stackblitz.com/edit/ui-router-react-hybrid-vgg4fy?file=ReactComponent.js
click on "react"

PR demonstrates issue
#32

UIView unable to render with custom parameters

Trying to pass custom parameters into a UIView using the render method as suggested here: ui-router/react#26

<UIView render={(Component, props) => <Component {...props} {...someOtherProps} /> } />

seems that render is not actually working when using react-hybrid? is this a known issue

Route to state with params doesn't work

I am trying to route from react component and implemented as the way mentioned in
#28

It does work for normal state without params in url, however it seems doesn't work for the url with params. Console was showing the error of stateService.js:41 Transition Rejection($id: 2 type: 6, message: The transition errored, detail: Error: Transition Rejection($id: 1 type: 4, message: This transition is invalid, detail: The following parameter values are not valid for state 'contact-detail': [id:"undefined"])) Here's how i implemented

Define state

$stateProvider
  .state('contact', {
     url: '/contacts/:id',
     template: "<contact-detail></contact-detail>"
  })

in react component

  <UIRouterContextComponent>
    <div>
      <UISref to={'contact'} params={{id: 1234}}>
        <a>hello world</a>
      </UISref>
    </div>
  </UIRouterContextComponent>

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

incompatible with React 16

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

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: {
            '[email protected]': FiltersComponent,
            '[email protected]': 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.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

ui-view with default content gets wiped out

Cool project, I'd like to use it in my own application, but we use the default content feature of ui-view pretty heavily.
It would be nice if default content was already being populated in a ui-view, that it would remain there instead of being replaced by the react-ui-view-adapter (https://github.com/ui-router/react-hybrid/blob/master/src/angularjs/ReactUIViewAdapterComponent.tsx#L18)

Any ideas?

Update Peer Dependencies

Hello!
The Readme says React 16.3 is required, but the peer dependencies show React 15.
I suggest to update it to React 16.3 to be more in-sync with the Readme.

Migrated to @ui-router from angular-ui-router, not able to route to React

Hi there,

I'm working on a Angular 1 project. Recently I migrated from angular-ui-router to @ui-router using the guide https://ui-router.github.io/guide/ng1/migrate-to-1_0

Rather than migrate fully to the new transitions hook model, I used the polyfill to keep the $stateChangeStart events. After following the guide and fixing a couple of breaking changes, the app is working as before.

I'm now trying to route directly to a React component and I'm not having any luck. The error I'm seeing is

Error: [$injector:unpr] Unknown provider: function TestComponent() {
    _classCallCheck(this, TestComponent); 
    
    return _possibleConstructorReturn(this, _getPrototypeOf(TestComponent).apply(this, arguments));
  }DirectiveProvider <- function TestComponent() {
    _classCallCheck(this, TestComponent);

    return _possibleConstructorReturn(this, _getPrototypeOf(TestComponent).apply(this, arguments));
}

The ui-router config for the part of the app where I'm trying to route to a React component is:

Import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid';
import TestComponent from './TestComponent'

const moduleName = module.exports = 'module.name.here'

angular
  .module(moduleName, [
    'ui.router',
    UI_ROUTER_REACT_HYBRID,
  ])
  .config(function($stateProvider) {
    
    $stateProvider
    .state('main.something', {
      url: '/something',
      abstract: true,
      views: {
        '': {
          template: '<ui-view></ui-view>',
        },
      }
    })
    .state('main.something.overview', {
      url: '',
      $type: "react", // tried this without it
      component: TestComponent
    })
  })

The React component is

import React, { Component } from 'react'

class TestComponent extends Component {
  render() {
    return (
      <div>
        <h1>Hello from react class component</h1>
      </div>
    )
  }
}

My package.json has the following dependencies:

"angular": "1.5.9",
"@uirouter/react-hybrid": "^1.0.2"

I believe this is definitely something I'm doing wrong. Any help is appreciated.

Accessing PropTypes via the main React package is deprecated

Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs

when using this package.

Is there any plan/way in UI Router to support Angular,AngularJS,React together in a SPA

My Project is a UX Platform (a SPA), where we have experiences rendered in AngularJs ,Angular. We are currently using uirouter/angular-hybrid for managing the states in our application. Now, we also want to support react experiences in our platform. Today there is no out of box support from uirouter -which works for AngulrJS,Angular and React together. With this context set, I would like to know some inputs on below questions in specific.

Is there any plan to support all 3 Frameworks in single ui router package?
Are there any alternative suggestions/methods to have common routing for all 3 Frameworks?

Nested views not working

The UIView viewport is not getting populated with child state.

The parent is structured like this:

<UIRouterContextComponent>
   <div>Some content</div>
   <UIView>Default content</UIView>
</UIRouterContextComponent>

The default content text shows up but the child state is not visible.

Params not passing from react context

I'm migrating an AngularJS application and replacing pieces with React components. These components have UISref links within the application and include parameters. The values of these parameters never seems to feed through to the deeper context though.

I've created a simpler test case of the issue:
https://stackblitz.com/edit/ui-router-react-hybrid-objparam

The routes at the top all set two params and they seem to work, but this is from an AngularJS context. If you choose one of the react states and then click one of the links further down the page, the parameters there never feed through and only null shows up.

Add 0.2.0 example / improve docs

Can you please provide an example for 0.2.0 implementation? ; )

Redux support?

When using this library with Redux I'm getting the error 'Error: Could not find "store" in either the context or props'. Is it possible to send the redux store to the router in some way?

No coreservices initialization

Hi! Thanks you for a great tool. Now I'm tring to migrate our product to react and this lib looks very useful to me.
I made a simple demo and it works perfectly, but I have a strange problem in my working project.
I replace current endpoint with code from demo

import angular, { ILocationProvider } from 'angular';
import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid';

import { Report } from './report';
import { ReportComponent } from './report.component';

const ngmod = angular
  .module('app', [UI_ROUTER_REACT_HYBRID])
  .config([
    '$locationProvider',
    '$stateProvider',
    ($locationProvider: ILocationProvider, $stateProvider: any) => {
      $locationProvider.html5Mode({ enabled: true });
      $stateProvider.state({
          name: 'react',
          url: '/react2',
          //template: '<h1>Other</h1>',
          //component: 'myReport',
          component: Report,
    });
    }
  ])
  .component('myReport', ReportComponent)
  .name;

angular.element(document).ready(() => {
  angular.bootstrap(document.documentElement, [ngmod]);
});

I've got exception

Looks like it happens because in file 'reactViews.js' imported variable "services" has undefined links to $q and $injector but in my demo project they have correct values.
Maybe you can help me.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

React state components do not unmount / remount when stateTransition.reload(true) is called

When you call this.props.transition.router.stateService.reload(true), if the current state is a React component, the component is not "reloaded"; by that, I mean it does not unmount and remount the react component.

I've also tried the other approach of using transitionTo(..., null, {reload:true, notify:true}).

Maybe I'm missing something?

onEnter function arguments must be '$transition$' and '$state$' if used in state definition

I put 'onEnter' in the state definition and register the state by 'UIRouter.stateRegistry.register(state)'.

We can try this in the 'react-hybrid/example/src/index.js'.
This won't work:
{
name: 'react', url: '/react', component: ReactComponent,
onEnter: (trans, state) => {
console.log(state.name);
}
},
index.js:1 Error: [$injector:unpr] Unknown provider: transProvider <- trans
(It seems like the code will put assume it's a provider named by 'argument+Provider').

This will work:
onEnter: ($transition$, $state$) => {
},

This issue only happens in 'react-hybrid', not in 'ui-router/react'.

npm WARN @uirouter/[email protected] requires a peer of react@^15.0.0 but none is installed. You must install peer dependencies yourself.

while installing this package together with React 16.x the error above occurs. looks like validation should include newer React versions too.

Integrating 3 frameworks

I dread putting this up as an issue as it's not a problem directly, however I am in a unique situation.
The project I got pulled into is setup with both AngularJS (1.5) and Angular 7.
However, we are now wanting to put up some new React based pieces to the puzzle.
I need a UIRouter Solution which can handle all 3.

Is there a way to use the React Hybrid to be the router of record and have it handle:
ReactJS
AngularJS
Angular7
?

@uirouter/react and @uirouter/angularjs should be peerDependencies

@uirouter/react and @uirouter/angularjs are included directly in this project. However, if one of these libraries are included in the package.json of the app, this causes a clash because all the globals (for example location services, $q, etc.) will not be populated.

UIRouter, <View> errors when setting up react-hybrid

I've attempted to set up react-hybrid in my Angular app while we migrate to React, following the Read.me and the example app. I'm using React 16.3.2, and it's unclear if it is compatible with the current version of react-hybrid or setup is wrong.

Setup looks something like this in app.js:
import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid';

angular.module('app', [ ... UI_ROUTER_REACT_HYBRID, ... ])

Then immediately get the following errors (edited for brevity, but I can post additional error information if necessary):

Warning: The <UIView /> component appears to have a render method, but doesn't extend React.Component. This is likely to cause errors. Change UIView to extend React.Component instead.

warning.js:33 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.
Check the render method of 'ReactUIView'. in UIView (created by ReactUIView) in UIRouterContextComponent (created by ReactUIView) in ReactUIView

Warning: Failed prop type: The prop 'router' is marked as required in 'View', but its value is 'undefined'. in View in UIView (created by ReactUIView) in UIRouterContextComponent (created by ReactUIView) in ReactUIView

Uncaught Error: UIRouter instance is undefined. Did you forget to include the <UIRouter> as root component?

The above error occurred in the <View> component: in View in UIView (created by ReactUIView) in UIRouterContextComponent (created by ReactUIView) in ReactUIView
Consider adding an error boundary to your tree to customize error handling behavior.

Nesting React state in an AngularJS state

First of all I'd like to thank you for this project, I can see this being very useful for a lot of people maintaining AngularJS projects. I have a question about nesting states, I'm trying to do something like this:

`$stateProvider.state('app', {
url: '/app',
templateUrl: 'layout/page',
controller: 'AppContainerController'
});

$stateProvider.state('app.hello', {
url: '/hello',
component: Hello
});`

Where Hello is a react component, but navigation to '/app/hello' doesn't load the React component to the UI-view. Is this use case not supported?

Apollo Client support

Hello guys!

I am new to Apollo client and I can see they use the *Provider pattern to activate Apollo for any React component in the tree. It's similar to how Redux is used.
However we have a hybrid AngularJS/ReactJS app and use your amazing router to be able to move to React incrementally but now we don't have ReactDOM.render() where I can add the ApolloProvider component and I wonder if we can still use Apollo with our configuration?

Thank you in advance for any hints! 👍

PS: if you suggest using another graphQL client instead of Apollo I will be happy to investigate it.

React directives don't work with hybrid app

As mentioned in the readme, we should be able to use react directives in the react components. I am getting an error UIRouter instance is undefined. This is probably because ui-router (react) is not initialised. Is this the intended behaviour? I am migrating my Angular 1 project to React using react2angular by rewriting the angular components in react. The main app is still in Angular which uses ui-router (angular) for routing.

When routing to a React component, that component can use the standard React directives (UIView, UISref, UISrefActive) from @uirouter/react.

TypeError: Cannot read property '$type' of undefined

https://github.com/ui-router/react-hybrid/blob/master/src/decorateUIRouterViewConfigs.ts#L34

.state('account.view.list', {
        url: '/list?new&updated&sortBy',
        title: title,
        views: {
          'sub_header@': accountRoutesHelperServiceProvider.getAccountDetails(),
          '': {templateUrl: 'someTemplate.html'}

 const view = views[key];
      const selfView = selfViews[key];

In views, it gets defined as '$default', but selfViews define it as ''; what is the expected behavior here?

Is the state definition wrong: should I update it to '$default'?

===
From https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views:

     // Relatively targets the unnamed view in this state's parent state, 'contacts'.		
        // <div ui-view/> within contacts.html		
        "" : { },

https://github.com/angular-ui/ui-router/blob/b2b906b0ad45f06ed114b0c042bdc60a176c60a8/src/statebuilders/views.ts#L56

Error: Could not resolve '[object Object]' from state X

While working with future states we are consistently seeing an issue when first try to redirect to the view in a future state (e.g. with a $state.go) results in no redirect and an error stack trace provided bellow. However, the second try always results in successful redirect. Network tab also shows that the module is being successfully loaded on the first try.

Using a direct url of the state in an anchor's tag href seems to be the workaround, but I was wondering if this was something that could be fixed by either changing the way we work with the react-hybrid or by changing library code.

I was going through the logic and got to this point

on the second try definition is present

I would really appreciate help with this and let me know if there is anything I could do to help investigate this better. Thanks!

angular.js:13424 Error: Could not resolve '[object Object]' from state 'app.project'
at new Transition (webpack:///./node_modules/@uirouter/core/lib-esm/transition/transition.js?:79:19)
at TransitionService.create (webpack:///./node_modules/@uirouter/core/lib-esm/transition/transitionService.js?:174:16)
at Transition.redirect (webpack:///./node_modules/@uirouter/core/lib-esm/transition/transition.js?:492:59)
at eval (webpack:///./node_modules/@uirouter/core/lib-esm/state/stateService.js?:370:42)
at processQueue (webpack:///./node_modules/angular/angular.js?:15757:28)
at eval (webpack:///./node_modules/angular/angular.js?:15773:27)
at Scope.$eval (webpack:///./node_modules/angular/angular.js?:17025:28)
at Scope.$digest (webpack:///./node_modules/angular/angular.js?:16841:31)
at eval (webpack:///./node_modules/angular/angular.js?:17064:26)
at completeOutstandingRequest (webpack:///./node_modules/angular/angular.js?:5824:10

Error: [$injector:unpr] Unknown provider

I am using React 16.4.0, Angular 1.6.9, @uirouter/react-hybrid 0.3.4 and ngReact 0.5.1. I have removed angular-ui-router as a dependency. I'm getting the error:

angular.js:14800 Error: [$injector:unpr] Unknown provider: function () {
  return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
    'div',
    null,
    'test'
  );
}DirectiveProvider <- function () {
  return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
    'div',
    null,
    'test'
  );
}Directive

My React component:

// TestComponent.jsx
import React from 'react';

export default () => <div>test</div>;

My router:

import TestComponent from './TestComponent';

$stateProvider.state({
  name: 'testView',
  url: 'test',
  component: TestComponent,
});

My modules file:

import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid';

angular.module('shared', [
  'ui.router',
  UI_ROUTER_REACT_HYBRID
]);

Any thoughts on how to resolve this error? Thank you!

Going to react component throws "Unknown provider: DirectiveProvider <- Directive"

I followed the directions in the guide to set up react-hybrid, but when going to the page with the React component, i get the below error. Am I missing something? There's a <ui-view> tag in the DOM, but no <react-ui-view-adapter> or <UIView>

Error: [$injector:unpr] Unknown provider: [object Module]DirectiveProvider <- [object Module]Directive
https://errors.angularjs.org/1.7.8/$injector/unpr?p0=%5Bobject%20Module%5DDirectiveProvider%20%3C-%20%5Bobject%20Module%5DDirective
    at angular.js:138:1
    at angular.js:4924:1
    at Object.getService [as get] (angular.js:5084:1)
    at angular.js:4929:1
    at Object.getService [as get] (angular.js:5084:1)
    at getComponentBindings (templateFactory.js:177:27)
    at TemplateFactory../node_modules/@uirouter/angularjs/lib-esm/templateFactory.js.TemplateFactory.makeComponentTemplate (templateFactory.js:168:1)
    at Ng1ViewConfig.getTemplate (views.js:75:1)
    at Object.<anonymous> (viewDirective.js:311:1)
    at angular.js:1388:1 '<ui-view class="ng-scope">'

package.js

"angular": "1.7.8",
"@uirouter/react-hybrid": "^1.0.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0"

app.js

var UI_ROUTER_REACT_HYBRID = require('@uirouter/react-hybrid').UI_ROUTER_REACT_HYBRID;

angular.module('app', [
    'config',
    'ui.router',
    'ui.router.state.events',
    ...
    UI_ROUTER_REACT_HYBRID
]);

routes

var Activity = require('../../../react/activity.root');

angular.module('app').config(settingsConfig);

settingsConfig.$inject = ['$stateProvider'];

function settingsConfig($stateProvider) {
    $stateProvider
     .state('app.settings', {
            abstract: true,
            template: '<ui-view/>'
        })
    .state('app.settings.activity', {
            url: '/settings/activity',
            component: Activity,
            data: {
                pageTitle: 'Activity'
            }
        })
}

component

import React from 'react';

const Root = () => {
    return <div>This is the activity page</div>;
};
export default Root;

Support React v18.1?

Since ReactDOM.render is no longer supported in React 18, any plan to upgrade this lib?

thank you

ui-router / react-hybrid Goto Github PK

react-hybrid's Introduction

UI-Router react-hybrid

UI-Router support for Hybrid Angular/React apps

Getting started

Add AngularJS module for hybrid support

Route to AngularJS components/templates

Route to React components

How it works

React and AngularJS ui-views

Providing "context" to children

react-hybrid's People

Contributors

Stargazers

Watchers

Forkers

react-hybrid's Issues

Recommend Projects

Recommend Topics

Recommend Org