G.L.3 February 2016

Rendering React Components to Specific Div Using Routing

I am using FlowRouter as a router for a Meteor/React application I am trying to create. I'm having a very hard time trying to get my react components to render in specific places. Does anyone know how to do this?

So on my landing page, when I click a button, I want to route to a secondary page. I have three different components that I want to render in certain parts of the page. I've been using ReactLayout.render(), but I can't seem to make sure components get rendered in certain areas. I thought document.getElementById would work

ReactLayout.render(LandingPage, document.getElementById("landing-page")

but it hasn't been.

Answers


Stephen Woods February 2016

The second parameter of ReactLayout.render expects an object. If you want to render several components into your LandingPage element, it might look something like this:

LandingPage = React.createClass({
  render() {
    return (
      <div className="app-root">
        <AppHeader />
        <div className="container">
          {this.props.testOne}
        </div>
        <div className="app-root">
          {this.props.testTwo}
        </div>
      </div>
    );
  }
});

Then render using:

FlowRouter.route( '/testRedirect', {
  name: 'test',
  action() {
    ReactLayout.render( Default, { testOne: <TestOneComponent />, testTwo: <TestTwoComponent /> } );
  }
});

Post Status

Asked in February 2016
Viewed 2,817 times
Voted 5
Answered 1 times

Search




Leave an answer