diff --git a/src/client.js b/src/client.js
index 4649d6d..a909514 100644
--- 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
index 7109acc..b2d8968 100644
--- 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 = (
`
diff --git a/src/views/Greeting.js b/src/views/Greeting.js
new file mode 100644
index 0000000..33e3950
--- /dev/null
+++ 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 Hello, {this.props.person.name}
;
+ }
+}
+
+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
index 456ca0a..f64f5fd 100644
--- 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 (
+
);