Help with FlowRouter

packages
1

HI,

I need some help with Flow-Router.
Here is my Component that I am trying to route to

import React, {Component} from 'react';

import {Meteor} from 'meteor/meteor';
import {render} from 'react-dom';

export default class Home extends Component {
  render() {
    return(
      <div id="Home" class="outer-container">
        <h1> Flow router works </h1>
      </div>
    )
  }
};

and here is the corresponding route.jsx file

import { Home } from '../imports/ui/components/Home.jsx';

FlowRouter.route("/", {
  name: "Home",
  action(params) {
    ReactLayout.render(Home);
  }
})

My main.jsx file is practically empty

Meteor.startup (()=>{
  console.log("Client side Meteor started");
});

I am getting following error.

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Followed by

TypeError: React.render is not a function. (In 'React.render(el, rootNode)', 'React.render' is undefined)

What am I doing wrong?

Thanks
Sudheer

2

I think it’s complaining that Home is undefined. Remove the braces from around Home in your import and you should be good. Also if you continue to get the error about React.render not being a function try importing react in route.jsx

3

@copleykj: That didn’t work. However, I finally got it to work as follows.
in my main.html file I added a new div as follows

<body>
  <div id="viewMyRouter" class="outer-container">
  </div>
</body>

and I changed the routes.jsx to as follows

import Home from '../imports/ui/components/Home.jsx';
import ReactDOM from 'react-dom';

FlowRouter.route("/Home", {
  name: "Home",
  action(params) {
    console.log("we are in router");
    ReactDOM.render(<Home />, document.getElementById("viewMyRouter"));
  }
})

now when I visit localhost:3000/Home, I can see the Home component displayed inside the viewMyRouter div.
For some reason React.render is not defined even after I imported React. But since this is working, I am going to with this for the time being.

Thanks
Sudheer