RickWong · csk157 · Aug 19, 2015
diff --git a/src/client.js b/src/client.js
@@ -6,8 +6,8 @@ import routes from "views/Routes";
 /**
  * Fire-up React Router.
  */
-Router.run(routes, Router.HistoryLocation, (Handler) => {
-	Transmit.render(Handler, {}, document.getElementById("react-root"));
+Router.run(routes, Router.HistoryLocation, (Handler, router) => {
+	Transmit.render(Handler, {queryParams: router.params}, document.getElementById("react-root"));
 });
 
 /**

diff --git a/src/server.js b/src/server.js
@@ -49,6 +49,25 @@ server.route({
 	}
 });
 
+server.route({
+	method: "GET",
+	path: "/api/names/{nameId}",
+	handler: (request, reply) => {
+		const exampleNames = {
+			"1": "John",
+			"2": "Jack",
+			"3": "Jane"
+		};
+
+		const name = exampleNames[request.params.nameId];
+		const result = {
+			name: name ? name : "Name not found"
+		};
+
+		reply(result);
+	}
+});
+
 /**
  * Catch dynamic requests here to fire-up React Router.
  */
@@ -58,7 +77,7 @@ server.ext("onPreResponse", (request, reply) => {
 	}
 
 	Router.run(routes, request.path, (Handler, router) => {
-		Transmit.renderToString(Handler).then(({reactString, reactData}) => {
+		Transmit.renderToString(Handler, {queryParams: router.params}).then(({reactString, reactData}) => {
 			let output = (
 				`<!doctype html>
 				<html lang="en-us">

diff --git a/src/views/Greeting.js b/src/views/Greeting.js
@@ -0,0 +1,21 @@
+import React from "react";
+import InlineCss from "react-inline-css";
+import Transmit from "react-transmit";
+
+class Greeting extends React.Component {
+	render () {
+		return <h1>Hello, {this.props.person.name}</h1>;
+	}
+}
+
+export default Transmit.createContainer(Greeting, {
+	queries: {
+		person (queryParams) {
+			// Calling the API when rendering on the server and when rendering
+			// on the client.
+
+			const api = `http://localhost:8000/api/names/${queryParams.personId}`;
+			return fetch(api).then((response) => response.json());
+		}
+	}
+});
diff --git a/src/views/Routes.js b/src/views/Routes.js
@@ -1,6 +1,7 @@
 import React from "react";
 import {Route, DefaultRoute} from "react-router";
 import Main from "views/Main";
+import Greeting from "views/Greeting";
 
 /**
  * The React Routes for both the server and the client.
@@ -10,5 +11,6 @@ import Main from "views/Main";
 export default (
 	<Route path="/">
 		<DefaultRoute handler={Main} />
+		<Route name="greeting" handler={Greeting} path="greeting/:personId" />
 	</Route>
 );