Upgrade React and React Router
This commit is contained in:
parent
ef8e8ca59e
commit
c96b4b624b
12 changed files with 218 additions and 134 deletions
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import createHandler from './react-handler';
|
||||
import { renderPage } from './react-handler';
|
||||
|
||||
import debuglog from 'debug';
|
||||
const debug = debuglog('match.audio');
|
||||
|
@ -11,12 +11,7 @@ export default function (routes) {
|
|||
yield next;
|
||||
} catch (err) {
|
||||
if (err.status === 404) {
|
||||
let Handler = yield createHandler(routes, this.request.url);
|
||||
|
||||
let App = React.createFactory(Handler);
|
||||
let content = React.renderToString(new App());
|
||||
|
||||
this.body = '<!doctype html>\n' + content;
|
||||
this.body = yield renderPage(routes, this.request.url, {});
|
||||
} else {
|
||||
debug('Error: %o', err);
|
||||
throw err;
|
||||
|
@ -28,12 +23,7 @@ export default function (routes) {
|
|||
switch (this.accepts('html', 'json')) {
|
||||
case 'html':
|
||||
this.type = 'html';
|
||||
let Handler = yield createHandler(routes, this.request.url);
|
||||
|
||||
let App = React.createFactory(Handler);
|
||||
let content = React.renderToString(new App());
|
||||
|
||||
this.body = '<!doctype html>\n' + content;
|
||||
this.body = yield renderPage(routes, this.request.url, {});
|
||||
break;
|
||||
case 'json':
|
||||
this.body = {
|
||||
|
|
45
lib/react-handler.js
vendored
45
lib/react-handler.js
vendored
|
@ -1,19 +1,34 @@
|
|||
import Router from 'react-router';
|
||||
import React from 'react';
|
||||
import { renderToString } from 'react-dom/server';
|
||||
import { RoutingContext, match } from 'react-router';
|
||||
import createLocation from 'history/lib/createLocation';
|
||||
|
||||
export default function* (routes, url) {
|
||||
let router = Router.create({
|
||||
location: url,
|
||||
routes: routes,
|
||||
onAbort(aborted) {
|
||||
let { to, params, query } = aborted;
|
||||
|
||||
this.redirect(Router.makePath(to, params, query));
|
||||
}
|
||||
});
|
||||
|
||||
return new Promise(function(resolve) {
|
||||
router.run((Handler) => {
|
||||
resolve(Handler);
|
||||
export function matchRoute(routes, url) {
|
||||
const location = createLocation(url);
|
||||
return new Promise((resolve, reject) => {
|
||||
match({ routes, location }, (error, redirectLocation, renderProps) => {
|
||||
resolve({error, redirectLocation, renderProps});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export function* renderPage(routes, url, state) {
|
||||
const { error, redirectLocation, renderProps } = yield matchRoute(routes, url);
|
||||
|
||||
if (error) {
|
||||
throw new Error(error.message);
|
||||
} else if (redirectLocation) {
|
||||
return redirectLocation.pathname + redirectLocation.search;
|
||||
} else if (renderProps === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const content = renderToString(<RoutingContext {...renderProps} />);
|
||||
|
||||
return '<!doctype html>\n' + content.replace('</body></html>', `<script>window.STATE = ${JSON.stringify(state)}</script>
|
||||
<script src='/jspm_packages/system.js'></script>
|
||||
<script src='/config.js'></script>
|
||||
<script>System.import('babel/external-helpers')</script>
|
||||
<script>System.import('views/app')</script>
|
||||
</body></html>`);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue