15 July 2015 – Building a React.JS App – Part 7

Part 7: Transitions with React Router – Using the router to transition from one component to another

Main.js

var React = require('react');
var RouteHandler = require('react-router').RouteHandler;
var SearchGithub = require('./SearchGithub');

var Main = React.createClass({
	render: function () {
		return (
			<div className="main-container">
				<nav className="navbar navbar-default" role="navigation">
					<div className="col-sm-7 col-sm-offset-2" style={{marginTop: 15}}>
						<SearchGithub />
					</div>
				</nav>
				<div className="container">
					<RouteHandler />
				</div>
			</div>
		)
	}
});

// We don't want this file to decide when to render this component,
// so we are removing it
//React.render(<Main />, document.getElementById('app'));

// Instead we are going to expert the compontent, so that whenever you
// do require('Main') it will render the compontent above.
module.exports = Main;

var React = require('react');

var RouteHandler = require('react-router').RouteHandler;

var SearchGithub = require('./SearchGithub');

var Main = React.createClass({

render: function () {

return (

</div>

</nav>

</div>

)

}

});

// We don't want this file to decide when to render this component,

// so we are removing it

//React.render(<Main />, document.getElementById('app'));

// Instead we are going to expert the compontent, so that whenever you

// do require('Main') it will render the compontent above.

module.exports = Main;

SearchGithub.js

var React = require('react');
var Router = require('react-router');

var SearchGithub = React.createClass({
	mixins: [Router.Navigation],
	handleSubmit: function () {
		var username = this.refs.username.getDOMNode().value;
		this.refs.username.getDOMNode().value='';
		this.transitionTo('profile', {username: username}); // Available from the Router.Navigation mixing as a property
		// We pass the route we want to transition to - in routes.js we defined the router as "profile" = <Route name="profile" path="profile/:username" handler={Profile} />
	},
	render: function () {
		return (
			<div className="col-sm-12">
				<form onSubmit={this.handleSubmit}>
					<div className="form-group col-sm-7">
						<input type="text" className="form-control" ref="username" />
					</div>
					<div className="form-group col-sm-5">
						<button type="submit" className="btn btn-block btn-primary">Search Github</button>
					</div>
				</form>
			</div>
		)
	}
});

module.exports = SearchGithub;

var React = require('react');

var Router = require('react-router');

var SearchGithub = React.createClass({

mixins: [Router.Navigation],

handleSubmit: function () {

var username = this.refs.username.getDOMNode().value;

this.refs.username.getDOMNode().value='';

this.transitionTo('profile', {username: username}); // Available from the Router.Navigation mixing as a property

// We pass the route we want to transition to - in routes.js we defined the router as "profile" = <Route name="profile" path="profile/:username" handler={Profile} />

render: function () {

return (