afenton90 / koa-react-router Goto Github PK

View Code? Open in Web Editor NEW

38.0 38.0 3.0 236 KB

react-router middleware for koa 2.

Home Page: https://www.npmjs.com/package/koa-react-router

License: MIT License

JavaScript 100.00%

koa koa2 middleware react react-router

koa-react-router's People

Contributors

Stargazers

Watchers

Forkers

mackstar sathishgovindaraju rbrtsmith

koa-react-router's Issues

Hydration incompatibilities

Problem:

Client hydration against koa-react-router supplied HTML is not possible using option defaults.

Example:

// server.js
const Container = ({ children }) => (
  <html>
    <head>...</head>
    <body>{ children }</body>
  </html>
)

const App = () => (
  <div>
    ...
  </div>
)

const app = new Koa()

app
  .use(koaReactRouter({
    App,
    onRender: () => ({ Container })
  }))

The HTML this produces lacks the necessary internal React data attributes that renderToString provides, data-reactroot, etc. If you attempt to ReactDOM.hydrate() against the server rendered HTML, hydration will fail, because of this.

Might be related to what is described in a similar problem in facebook/react#12651.

(react can't effectively find the root to mark, possibly related to the root within view string being StaticRouter.)

This is easily circumvented by supplying an opts.preRender similar to below, which introduces an arbitrary practical root that renderToString can discern. A subsequent client call to ReactDOM.hydrate will find all the necessary react data markings it needs to hydrate against.

const app = new Koa()

app
  .use(koaReactRouter({
    App,
    onRedirect: () => console.log('I have redirected!'),
    onRender: () => ({ Container }),
    preRender: wrapped => (
      <div id="root">
        {wrapped}
      </div>
    )
  }))

NB: assume this is not within the scope of this library's design concerns. Might be worth calling out in the readme though?

Async component support

Any chance of getting async component support into this?

Support for async components or guidance on how to implement them when using koa-react-router would be great. Perhaps even supports something like getInitialProps too?

Thoughts? Happy to help out if I can. Although my only experience of implementing async components is using bundle-loader with webpack which won't work for ssr

Upgrading to React Router 4?

Hey there, any plans to upgrade this to the new React Router 4?

catch error during render of RouterContainer

It would be great if we could catch error rendering:

try {
    view = renderToString((
        <RouterContainer>
            <RouterContext {...props} />
        </RouterContainer>
));
}
catch (e) {
 // yey !
}
}

Outdated build not working for node 7 --harmony

I get ReferenceError: regeneratorRuntime is not defined error when using this package from npm using babel 6 on node 7.4 with the --harmony flag, meaning async/await are supported.

It's based on using the build output from a specific version of node.js/babel configuration as the output to the npm package distribution.

If I copy/paste the source file at index.js into a file /src/lib/koa-react-router/index.js locally and import that, everything works.

Below is the exact output:

> node --harmony dev

/Users/jh/dev/zyzzyxlab/tao.js.example/node_modules/koa-react-router/lib/index.js:10
  onRender = _ref.onRender;return function () {var _ref2 = _asyncToGenerator(regeneratorRuntime.mark(
                                                                             ^

ReferenceError: regeneratorRuntime is not defined
    at /Users/jh/dev/zyzzyxlab/example/node_modules/koa-react-router/index.js:5:16
    at Object.<anonymous> (/Users/jh/dev/zyzzyxlab/example/src/server.js:11:9)
    at Module._compile (module.js:571:32)
    at loader (/Users/jh/dev/zyzzyxlab/example/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/jh/dev/zyzzyxlab/example/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/jh/dev/zyzzyxlab/example/dev.js:3:1)

Using this .nvmrc file:

7.4

Running with the following package.json:

{
  "name": "example",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "node --harmony dev"
  },
  …
  "dependencies": {
    "koa": "^2.0.0",
    "koa-react-router": "^1.0.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.2"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-cli": "^6.22.0",
    "babel-preset-node7": "^1.4.0",
    "babel-preset-react": "^6.22.0",
    "babel-register": "^6.18.0",
    "eslint": "^3.13.1",
    "eslint-plugin-babel": "^4.0.0"
  }
}

Following .babelrc:

{
  "presets": [
    "node7",
    "react"
  ]
}

And the following JS files:

// dev.js
require('babel-register');

require('./src/server');

// /src/server.js
import Koa from 'koa';

// import React from 'react';
import reactrouter from 'koa-react-router';
// below works as copied from source in github repo
// import reactrouter from './lib/koa-react-router';

// example routes
import routes from './shared/routes';
// example wrapping component for HTML
import Html from './shared/containers/html';

const app = new Koa();

app.use(reactrouter({
    routes,
    onError: (ctx, err) => console.error(`We had an error, boss!`, err),
    onRedirect: (ctx, redirect) => console.log(`Supposed to redirect, boss. To:`, redirect),
    onNotFound: (ctx) => console.log(`Path NOT FOUND, boss`),
    onRender: (ctx) => ({ Container: Html }),
}));

app.use(async (ctx, next) => {
    console.log(`sending response back as:\n`, ctx.response.body);
});

app.listen(4008);
console.log('Web server ready, boss');

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.