Flow router, components and props
Download as PPTX, PDF0 likes183 views
This document discusses routing in a Meteor React application using FlowRouter. It introduces FlowRouter and its prerequisites of React Layout. It provides an example of setting up basic routing with FlowRouter to render different component templates at routes like '/stats' and '/add-player'. Components mentioned include AddForm, Player Stats, and Single Stat. The document also discusses passing props between components.
Flow router, components and props
- 1. FlowRouter, Components and Props by Mukul
- 5. What are we making?
- 6. ● git clone https://github.com/nodexpertsdev/react-player-stats.git ● cd react-player-stats ● git checkout step-2/routing-components-props ● cd step-2 ● meteor npm install ● meteor
- 7. Add form Component import React from 'react'; import { Meteor } from 'meteor/meteor'; export default class AddForm extends React.Component { constructor(props) { super(props); } render() { return ( <div className="container"> </div> ); } }
- 8. Flow Router ● Prerequisite ○ React Layout ● Install Packages: ○ meteor add kadira:flow-router ○ meteor add kadira:react-layout
- 9. Flow Router ● Import these packages ○ import { FlowRouter } from 'meteor/kadira:flow-router'; ○ import { ReactLayout } from 'meteor/kadira:react-layout';
- 10. Flow Router - Routing skeleton FlowRouter.route( '/stats', { name: 'stats', action() { ReactLayout.render( App, { yield: <Stats /> } ); } }); FlowRouter.route( '/add-player', { name: 'add-player', action() { ReactLayout.render( App, { yield: <AddForm /> } ); } });