Releases: afenton90/koa-react-router
React Router 5
React 16 support
Changes
This release includes support for React 16. This is being done as a major release as this does change the peerDependencies which themselves include breaking changes.
Issues
- #7 : package-lock.json is no longer included in the repo.
`preRender` hook
Changes
This release includes a new callback. To be used before the whole application is rendered.
One example of this is to resolve data dependencies in the React tree.
An usage example will be added in a further release.
Contributions
Thanks very much @SathishGovindaraju for your work on this, much appreciated 🎉
Further Koa Response fix
Further fix for setting response status.
The previous fix did not play well with default Koa 2 behaviour, as the default responses status is 404.
Koa response status
This release fixes an issue where the response status in the koa context was not being read.
Previous behaviour was that response status was always 200 if it was not set in the router staticContext.
Behaviour now is that if the status is NOT set in the staticContext it will be read from the koa response context (A.K.A ctx.response.status)
React Router 4 support
V2 of koa-react-router includes support for React Router 4 apps. React Router 4 went through a lot of changes, as such so has koa-react-router.
New Features
Static Context - ctx.state.routerContext
React Router 4 added support for a static router context this context can be used in your application, to pass values from your router to other middleware and drive behaviour for routes.
Doc Type Default
The previous release of koa-react-router did not add <!doctype html> to the top of your rendered page.
This was a pain as this then needed to be added to each server side rendered app that used this middleware. This release now adds <!doctype html> to the top of the markup by default.
Deprecated
No more routes prop ?
The routes prop has gone in favour of the App config prop. Where you would have passed in your static routes before you can now pass in your App component that contains the React Router routes. For example:
// App.js
import React from 'react';
import { Route } from 'react-router';
import Home from '../containers/Home';
import Article from '../containers/Article';
const App = () =>
<div>
<h1>This is my App!</h1>
<Route path="/" component={Home} exact />
<Route path="/article" component={Article} exact />
</div>;React Router 4 gives you the flexibility to define your routes wherever you want in your app, and so does koa-react-router.
What do I do with routes that are not found ?
The previous version of koa-react-router supported a onNotFound callback. This has been deprecated in favour of defining a status prop on the React Router static context and using a Switch component in your app. For example, our App component may be written as:
import React from 'react';
import { Route, Switch } from 'react-router';
import Home from '../containers/Home';
import Article from '../containers/Article';
const NotFound = ({ status }) =>
<Route
render={({ staticContext }) => {
if (staticContext) staticContext.status = status;
return <div>This route has not been found Soz!</div>;
}}
/>;
const App = () =>
<div>
<h1>This is my App!</h1>
<Switch>
<Route path="/" component={Home} exact />
<Route path="/article" component={Article} exact />
<NotFound status={404} />
</Switch>
</div>;If not other routes are matched the NotFound component will be rendered, and koa-react-router will set the response code status.