当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

koa-react-router

react-router middleware for koa 2.

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者凌朗

操作系统跨平台

开源组织无

适用人群未知

软件概览

koa-react-router

koa 2 middleware for React server side rendering and routing with react-router 5.

Looking for React Router 3 support see v1 docs.Try React Router 5 though it's awesome!

Usage

To install koa-react-router:

  npm install koa-react-router react react-dom react-router --save

Note: react react-dom & react-router are all peerDependencies of koa-react-router.

koa-react-router can be mounted easily in a koa 2 application like so:

// index.js
  import Koa from 'koa';
  import reactrouter from 'koa-react-router';
  import App from './App';
  import Container from './containers/PageContainer';

  const app = new Koa();

  app.use(reactrouter({
    App,
    onError: (ctx, err) => console.log('I Have failed!!!!'),
    onRedirect: (ctx, redirect) => console.log('I have redirected!'),
    onRender: (ctx) => ({ Container })
  }));

API

koa-react-router requires the following parameters:

`App`

The App config prop should be a react component that contains one or more React Router 4 Route components to be rendered.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>;

  // index.js
  // ...imports
  import App from './App';

  // ... koa app setup
  app.use(reactrouter({
    App,
    // Other callbacks
  }));

`preRender`

Callback function called before rendering App.This callback can either be a normal function which returns a valid component or it can return a Promise which then resolves and returns a valid component.The function accepts the following parameters:

component - The StaticRouter wrapped around the App.

This callback could be used to wrap the component with any other higher-order component before it gets rendered

`onError`

Callback function called when an error occurs whilst route matching or rendering.
The function accepts the following parameters:

ctx - The Koa Context object.
err - The error that was caught when matching routes.

`onRedirect`

Callback function called if a Redirect route is matched.
The function accepts the following parameters:

ctx - The Koa Context object.
redirectUrl - The url to redirect to.

`onRender`

Callback function called before sending a response to the client.This function must be supplied, and must return an object that contains the following property:

`Container`

This should be a React component that wraps around the rendered route.
Typically this will be the template for the page, however this is not mandatory.
As such this component is rendered using renderToStaticMarkup.
The component must accept the children prop and insert it when rendered.For example:

// ./containers/Container
  import React from 'react';

  const Container = (props) =>
    <html lang="en">
      <head>
        <title>Hello Container</title>
      </head>
      <body>
        <div id="app">
          {props.children}
        </div>
      </body>
    </html>;

  export default Container;

This would then be supplied to koa-react-router via the onRender callback like so:

// index.js
  import Koa from 'koa';
  import reactrouter from 'koa-react-router';
  import App from './App';
  import Container from './containers/Container';

  const app = new Koa();

  app.use(reactrouter({
    App,
    onRender: (ctx) => ({ Container })
  }));

As well as the Container property this callback can optionally return:

`containerRenderer`

Optional function for handling the rendering of a container component.
This function has one argument which is view. This argument is the currently rendered view of the app.
This function may be used if some custom props need to be injected into the container component, such as an initial Redux state.
This function should be used instead of the Container property when returning from onRender.
For example you may want to render the container as follows:

// index.js
  import Koa from 'koa';
  import reactrouter from 'koa-react-router';
  // ...other imports

  const app = new Koa();

  const state = // Create state.

  app.use(reactrouter({
    App,
    onRender: (ctx) => ({
      containerRenderer: (view) =>
      <html lang="en">
        <head>
          <script dangerouslySetInnerHTML={{ __html: state}} />
        </head>
        <body>
          <p>hello container</p>
          <div dangerouslySetInnerHTML={{ __html: view }} />
        </body>
      </html>
    })
  }));

The final page render would look something like:

<html lang="en">
  <head>
    <script>//State config</script>
  </head>
  <body>
    <p>hello container</p>
    <div>
      <!-- View html in here -->
    </div>
  </body>
</html>

`id`

Optional id for React to use as the base of the app. Default: app

In order for React to re-hydrate the DOM on the client it needs to know where it should attach itself. In a previous version of koa-react-router this was not possible. This property allows you to add a custom root id to the DOM. For example, if you set this to root, the output would look something like.

<html lang="en">
  <head>
    <script>//State config</script>
  </head>
  <body>
    <div id="root">
      <!-- View html in here -->
    </div>
  </body>
</html>

Router Context

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.
koa-react-router makes this context available on the koa ctx in the following location:

ctx.state.routerContext;

One example of using this context is setting a status in the route context so a later middleware can set that as this response code.The common use case of status is already taken care of. So if one of your routes sets a status prop whilst rendering that will be set as the response status See Not found in the FAQ section for an example.
Use the routerContext for whatever you want in your app, some common recipes will be added to this repo at a later date.

FAQ

This release includes some deprecated props. As React Router has come with some major changes so has koa-react-router.

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.

使用案例

KOA-REACT-SSR的实现

前言这篇文章讲述如何整合koa，react，nunjacks，koa-router实现一个服务端渲染的工程 koa搭建服务器 // index.js const Koa = require('koa') const app = new Koa() app.use(async(ctx, next) => { ctx.body = 'hello world!' next() }) a
koa2的脚手架koa-generator

如果你想搭建个项目，一般都是有脚手架的，比如vue的脚手架 vue-cli , react的脚手架 create-react-app ，还有一些其他的，像AntD Admin等。如果想使用koa2 , 也是有一些脚手架的，我常用的就是 koa-generator ，安装它也是很简单： 1.首先需要全局安装 npm install -g koa-generator 2.创建项目 koa2 -e
koa踩坑路之–koa的POST请求无法接收数据，upload时候无法接收formdata数据，使用koa-body，完成图片上传

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档前言提示：这里可以添加本文要记录的大概内容：学习图片上传和保存的过程中，发现post过来的FormData数据无法获取，经过漫长的踩坑过程，实现FormData上传图片，学习文档，仅限于共同进步，大神请绕行。提示：以下是本篇文章正文内容，下面案例可供参考一、koa-body 使用koa-body解析post数据，实现Form
koa-static与react-create-app搭配的路径

概述前端路由与后端路由的结合一直是一个难题。koa-static这个中间件能够把静态资源“搬到”后端路由上面去，react-create-app在不解构的情况下只会把资源打包到build文件夹，怎么协调koa-static，react-create-app和react-router-dom？我摸索出了一个解决方案，记录下来，供以后开发时参考，相信对其他人也有用。源码可以参考我的github。
koa,koajs_koa2 模板引擎模块 koa-views 的使用，koa,koajs,node - phpStudy

koa2 模板引擎模块 koa-views 的使用我通过koa-generator脚手架构建一个项目用于学习koa2，现遇到的问题是脚手架官配koa-views，虽说支持很多模板引擎，但没有指出那些模板引擎的高级用法该怎么做？代码如下： var app = require('koa')() , koa = require('koa-router')() , logger = require(
一个简单的Node-React-Koa用户管理增删改查小demo

前端：create-react-app antd axios react 后端：node koa sequelize mysql 作为一个前端小新手，在尝试了一段时间的react前端工作后，就想尝试用node编写web服务，假装自己很厉害。在看了一段时间的node教程+express教程+koa教程等，就开始准备自己写一个小demo。前端效果图（react+ antd + create-reac
2021-07-14-react开发环境配置

react 目录目录 └─┬ 前端开发指南 ├─┬ 配置环境 │ ├── 配置 Git │ └── 配置前端本地开发环境 ├── 开发流程 ├── 开发规范 ├── 浏览器兼容性 ├── Docker └── 部署前端开发指南配置环境配置 Git 在终端中执行如下命令安装 Xcode 命令行工具 xcode-select --install 注意： Xco

koa-react-router

koa-react-router

Usage

API

`App`

`preRender`

`onError`

`onRedirect`

`onRender`

`Container`

`containerRenderer`

`id`

Router Context

FAQ

No more routes prop ?

What do I do with routes that are not found ?

同类工具

相关阅读

相关文章

相关问答

相关文档