react-express-router

React Express Router is a declarative router that wrap Express APIs to use they like a react components.

How to install

yarn add react-express-router react

or

npm i react-express-router react

Usage

import React from 'react';
import { Express, Route, compile } from 'react-express-router';

const handlerHelloWorld = (req, res) => {
  res.send('Hello world!');
};

const app = (
  <Express>
    <Route path="/test" method="GET" handle={handlerHelloWorld} />
  </Express>
);

compile(app).listen(3000, () => {
  console.log('Example app listening on port 3000!');
});

and visit http://localhost:3000/test to look the hello world!

Documentation

Components

• Express
• Middleware
• Route
• ErrorHandler
• ParamMiddleware

Express

This components is used to wrap all routes/middlewares. And when it's compiled returns an Application instance.

| Prop | Description | Value | Default | | ---- | --------------------- | --------------------------------------------- | --------- | | path | Root path. (optional) | string \| RegExp \| Array<string \| RegExp> | undefined |

Example:

const app = (
  <Express>
    <Route path="/test" method="GET" handle={handlerHelloWorld} />
  </Express>
);

compile(app).listen(3000, () => {
  console.log('Example app listening on port 3000!');
});

Middleware

With this component you can define a middleware. Also you can wrap routes/middlewares with it.

| Prop | Description | Value | Default | | ------ | -------------------------------------------------- | --------------------------------------------- | --------- | | path | Access path. (optional) | string \| RegExp \| Array<string \| RegExp> | undefined | | handle | Action to execute when the middleware is triggered | function(req, res, next) | - |

More info: http://expressjs.com/en/guide/writing-middleware.html#writing-middleware-for-use-in-express-apps

Example:

const app = (
  <Express>
    <Middleware handle={bodyParser.json()} />
    <Route path="/user" method="POST" handle={handlerUserCreation} />
    <Route path="/" method="GET" handle={handlerDefaultPage} />
  </Express>
);

const app = (
  <Express>
    <Middleware handle={authMiddleware}>
      <Route path="/dashboard" method="GET" handle={handlerDashboard} />
      <Route path="/profile" method="GET" handle={handlerProfile} />
    </Middleware>
    <Route path="/" method="GET" handle={handlerDefaultPage} />
  </Express>
);

const app = (
  <Express>
    <Middleware path="/account" handle={authMiddleware}>
      <Route path="/apps" method="GET" handle={handlerApps} />{' '}
      {/* you can access using /account/apps */}
      <Route path="/profile" method="GET" handle={handlerProfile} /> {/* you can access using /account/profile */}
    </Middleware>
    <Route path="/" method="GET" handle={handlerDefaultPage} />
  </Express>
);

Route

Probably the most important component. It has the responsibility to catch the current request.

| Prop | Description | Value | Default | | ------------- | ---------------------------------------------------------------- | --------------------------------------------- | --------- | | path | Access path. | string \| RegExp \| Array<string \| RegExp> | undefined | | method | The http method. See the full list below. | get \| post \| put | - | | handle | Action to execute when the route is triggered | function(req, res, next) | - | | caseSensitive | Enable case sensitivity. (optional) | boolean | false | | mergeParams | Preserve the req.params values from the parent router.(optional) | boolean | false | | strict | Enable strict routing. (optional) | boolean | false |

Full list of methods: http://expressjs.com/en/4x/api.html#app.METHOD More info: http://expressjs.com/en/guide/routing.html

Examples:

const app = (
  <Express>
    <Route path="/" method="GET" handle={handlerDefaultPage} />
    <Route path="/about" method="GET" handle={handlerAboutPage} />
    <Route path="/products">
      <Route path="/:id" method="GET" handler={handlerGetProduct} />
      <Route path="/:id" method="POST" handler={handlerCreateProduct} />
      <Route path="/:id" method="PUT" handler={handlerUpdateProduct} />
      <Route path="/" method="GET" handler={handlerGetAllProducts} />
    </Route>
  </Express>
);

// also you can nested more routes
const app = (
  <Express>
    <Route path="/" method="GET" handle={handlerDefaultPage} />
    <Route path="/about" method="GET" handle={handlerAboutPage} />
    <Route path="/products">
      <Route path="/:id" method="GET" handler={handlerGetProduct} />
      <Route path="/:id" method="POST" handler={handlerCreateProduct} />
      <Route path="/:id" method="PUT" handler={handlerUpdateProduct} />
      <Route path="/" method="GET" handler={handlerGetAllProducts} />

      <Route path="/details">
        <Route path="/" method="GET" handler={handlerGetProductDetails} />
        <Route path="/shippings">
          <Route path="/" method="GET" handler={handleGetProductShippings} />
          <Route path="/:id" method="GET" handler={handleGetProductShipping} />
        </Route>
      </Route>
    </Route>
  </Express>
);

ErrorHandler

Component to catch and process an error with the request. Only one per app.

| Prop | Description | Value | Default | | ------ | ----------------------------------------------------- | ------------------------------- | ------- | | handle | Action to execute when the error handler is triggered | function(err, req, res, next) | - |

More info: http://expressjs.com/en/guide/error-handling.html#error-handling

const app = (
  <Express>
    <Route path="/" method="GET" handle={handlerDefaultPage} />
    <ErrorHandler handle={handlerError} />
  </Express>
);

ParamMiddleware

This middleware is used to handler custom params.

| Prop | Description | Value | Default | | ------ | ----------------------------------------------------- | ------------------------------------- | --------- | | name | Name of the param (optional) | string | undefined | | handle | Action to execute when the error handler is triggered | function(req, res, next, val, name) | - |

More info: http://expressjs.com/en/api.html#app.param

Custom Components

Also you can create your own components with the native components.

Example:

const UserRouter = () => (
  <Middleware path="/user" handle={handlerUserAuth}>
    <Route path="/" method="GET" handle={handlerUserPage} />
    <Route path="/settings" method="GET" handle={handlerUserSettings} />
  </Middleware>
);

const app = (
  <Express>
    <Route path="/" method="GET" handle={handlerDefaultPage} />
    <UserRouter />
    <ErrorHandler handle={handlerError} />
  </Express>
);

Compile a Route

And you can compile a router and integrate it with your current app.

const UserRouter = () => (
  <Route>
    <Middleware path="/user" handle={handlerUserAuth}>
      <Route path="/" method="GET" handle={handlerUserPage} />
      <Route path="/settings" method="GET" handle={handlerUserSettings} />
    </Middleware>
  </Route>
);

const app = express();

app.use(pageRouter);
app.use(compile(<UserRouter />));

Next steps

• Improve the documentation
• Implement a component to use express.static, express.json and express.urlencoded