koa-react-router

Bot releases are visible (Hide)

koa-react-router - React Router 5 Latest Release

Published by afenton90 over 5 years ago

Changes

This release includes support for React Router 5. As well as some bug fixes.

Issues

#11: Hydration issues can now be fixed using the new id property.
#2: regeneratorRuntime is now longer used, as node@10 is supported.

koa-react-router - React 16 support

Published by afenton90 almost 7 years ago

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.

koa-react-router - `preRender` hook

Published by afenton90 almost 7 years ago

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 🎉

koa-react-router - Further Koa Response fix

Published by afenton90 about 7 years ago

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-react-router - Koa response status

Published by afenton90 about 7 years ago

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)

koa-react-router - React Router 4 support

Published by afenton90 about 7 years ago

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>;