Fix issue with props passed in via router

Author: bc022699

kitchen-sink/components/pages/DynamicRoutePage.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import {Page, Navbar, ContentBlockTitle, List, ListItem, ListLabel, ListGroup, ListButton} from 'framework7-react';
+import {Page, Navbar, ContentBlockTitle, ContentBlock, List, ListItem, ListLabel, ListGroup, ListButton} from 'framework7-react';
 import {getCurrentRoute} from '../App';
 
 export class DynamicRoutePage extends React.Component<any, any> {
     private currentRoute: any;
 
-    constructor() {
-        super();
+    constructor(props: any, context: any) {
+        super(props, context);
 
         this.currentRoute = getCurrentRoute();
     }
@@ -16,30 +16,39 @@ export class DynamicRoutePage extends React.Component<any, any> {
             <Page>
                 <Navbar backLink="Back" title="Lists" sliding></Navbar>
 
-                <ul>
-                    <li><b>Url:</b> {this.currentRoute.url}</li>
-                    <li><b>Path:</b> {this.currentRoute.path}</li>
-                    <li><b>Hash:</b> {this.currentRoute.hash}</li>
-                    <li><b>Params:</b>
-                        <ul>                      
-                        {
-                            Object.keys(this.currentRoute.params).map((paramName, index) => {
-                                return (<li key={index}><b>{`${paramName}:`}</b> {this.currentRoute.params[paramName]}</li>);
-                            })
-                        }                            
-                        </ul>
-                    </li>
-                    <li><b>Query:</b>
-                        <ul>
-                        {
-                            Object.keys(this.currentRoute.query).map((queryItem, index) => {
-                                return (<li key={index}><b>{`${queryItem}:`}</b> {this.currentRoute.query[queryItem]}</li>);
-                            })
-                        }                        
-                        </ul>
-                    </li>
-                    <li><b>Route:</b> {this.currentRoute.route}</li>
-                </ul>
+                <ContentBlock inner>
+                    <ul>
+                        <li><b>Url:</b> {this.currentRoute.url}</li>
+                        <li><b>Path:</b> {this.currentRoute.path}</li>
+                        <li><b>Hash:</b> {this.currentRoute.hash}</li>
+                        <li><b>Params:</b>
+                            <ul>                      
+                            {
+                                Object.keys(this.currentRoute.params).map((paramName, index) => {
+                                    return (<li key={index}><b>{`${paramName}: `}</b>{this.currentRoute.params[paramName]}</li>);
+                                })
+                            }                            
+                            </ul>
+                        </li>
+                        <li><b>Query:</b>
+                            <ul>
+                            {
+                                Object.keys(this.currentRoute.query).map((queryItem, index) => {
+                                    return (<li key={index}><b>{`${queryItem}:`}</b> {this.currentRoute.query[queryItem]}</li>);
+                                })
+                            }                        
+                            </ul>
+                        </li>
+                        <li><b>Route:</b> {this.currentRoute.route.path}</li>
+                    </ul>
+                </ContentBlock>
+                <ContentBlock inner>
+                    <p>Route <b>params</b> are also passed as component props:</p>
+                    <ul>
+                        <li><b>id:</b> {this.props.id}</li>
+                        <li><b>post_id:</b> {this.props.post_id}</li>
+                    </ul>
+                </ContentBlock>
             </Page>
         );
     }

src/utils/reactify-vue/react-element-creation/CreateReactElements.ts

@@ -58,20 +58,19 @@ export const createReactElement = (
 
     if (!componentOrComponentName) return null;
 
-    if (args.tag === 'component') {
-        reactElement = React.createElement(componentOrComponentName as React.ComponentClass<any>);
-    } else {
-        let resolvedComponent;
-        
-        resolvedComponent = resolveDependencyComponent(instantiatedComponents, componentOrComponentName as string);               
-        children = flattenNestedArrayOfChildren(children);        
+    let resolvedComponent;
 
-        if (!resolvedComponent) resolvedComponent = componentOrComponentName as React.ComponentClass<any> | React.StatelessComponent<any>;
+    if (args.tag !== 'component') {
+        resolvedComponent = resolveDependencyComponent(instantiatedComponents, componentOrComponentName as string);
+    } 
+    
+    children = flattenNestedArrayOfChildren(children);
 
-        const props = propsProcessor.getProps(args, children, componentOrComponentName, resolvedComponent, vueComponent);
-        
-        reactElement = React.createElement(resolvedComponent, props);
-    }
+    if (!resolvedComponent) resolvedComponent = componentOrComponentName as React.ComponentClass<any> | React.StatelessComponent<any>;
+
+    const props = propsProcessor.getProps(args, children, componentOrComponentName, resolvedComponent, vueComponent);
+    
+    reactElement = React.createElement(resolvedComponent, props);
 
     return reactElement;
 };