From 5889bd4c6bd51fefca67e053cbe3538e15cabf27 Mon Sep 17 00:00:00 2001 From: Ceslovas Lopan Date: Wed, 19 Aug 2015 21:04:18 +0200 Subject: [PATCH] Pass route params to handlers and demonstrate how they are used --- src/client.js | 4 ++-- src/server.js | 21 ++++++++++++++++++++- src/views/Greeting.js | 21 +++++++++++++++++++++ src/views/Routes.js | 2 ++ 4 files changed, 45 insertions(+), 3 deletions(-) create mode 100644 src/views/Greeting.js 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 ( + );