Passing a Component to a React Container Using FlowRouter?

help
1

I’ve been able to access FlowRouter {content} in a component mounted directly. I am now seeking to access FlowRouter {content} in a component mounted in a container . Here is my FlowRouter route:

FlowRouter.route('/', {
    name: 'myItems.list',
    action() {
        mount(MainLayoutCtx, {
            content: () => (<myComponent />)
        });
    }
});

The FlowRouter docs don’t seem to reference React-Mounter:

FlowRouter.route('/:postId', {
  action(params) {
    ReactLayout.render(MainLayout, {content: <BlogPost {...params} />});
  }
});

The React-Mounter docs also don’t seem to reference a component mounted in a container.

This is a pretty common thing to have to do, but I haven’t yet found docs explaining how to do it.

What do the container and the component need to do in order for the component to access {content} ? Is there a link that describes how to do it?

Thanks in advance to all for any info.

2

You mean like this ? Sorry if i missed something.

//in your route file.jsx
import {FlowRouter} from 'meteor/kadira:flow-router';
import React from 'react';
import {mount} from 'react-mounter';
//if you use import

class MainLayoutCtx extends React.Component {
   render(){
    const {content} = this.props //destructuring obj
    return (
     <div>
      {content}
     </div>
    )
  }
}

FlowRouter.route('/apps',{
  action(){
   mount( MainLayoutCtx, {content: <App/>}
  }
}
2 Likes
3

I think you are pointing me in the right direction!

At the same time, I’m getting a console error I’d like to get your thoughts on.

Router:

import React from 'react';
import {mount} from 'react-mounter';
import Layout from './components/MainLayout.jsx';
import myComponent from './containers/myComponent.js';

    FlowRouter.route('/', {
        action() {
            mount(MainLayoutCtx, {content: <myComponent />});
        }
    });

}

MainLayout.jsx:

import React from 'react';

class Layout extends React.Component {
    render() {
        const {error, content} = this.props;
        return (
        {content}
        );
    }
}

export default Layout;

Here’s the console error:

modules.js?hash=92b25bb…:22381 Uncaught Invariant Violation: Layout.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

What did I leave out?

4

the render function should be returning a top level element eg you can wrap your {content} in a div or span

1 Like
5

I got this working!

FlowRouter:

import myContainer from '../myContainer/containers/myContainer.js';

 FlowRouter.route('/', {
        name: 'myContainer.list',
        action() {
            mount(MainLayoutCtx, {content: <myContainer />});
        }
    });

Layout Component:

import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import AppBar from 'material-ui/AppBar';

const lightMuiTheme = getMuiTheme(lightBaseTheme);

class Layout extends React.Component {
    render() {
        const {error, content} = this.props;
        return (
            <MuiThemeProvider muiTheme={lightMuiTheme}>
                <div>
                    <AppBar title="My AppBar" />
                    {content}
                </div>
            </MuiThemeProvider>
        );
    }
}

export default Layout;

Thanks very much, @mingliang7, for your help.

2 Likes