@siteone/react-server-router

React server router.

Usage no npm install needed!

<script type="module">
  import siteoneReactServerRouter from 'https://cdn.skypack.dev/@siteone/react-server-router';
</script>

README

Server Router

Router that is completely handled on backend.

Supports directly GraphQL (and also is compatible with for example REST)

ApolloServerRouter

Declarative React component , that requires only two props:

  • templates: simple object, in keys are template names that gives us backend
  • loadingComponent: component that is shown while is router communicating with backend
  • onChange (optional) function, that will be invoked when the route is about to re-render
Example (for GraphQL):
import React from 'react'
import { MemoryRouter, Link, Switch } from 'react-router-dom'
import { ApolloProvider } from 'react-apollo'
import { ServerRouterApollo } from '@siteone/react-server-router'

const templatesMap = {
  DESTINATION: (data) => (<div {...data} />),
  HOMEPAGE: (data) => (<div {...data} />),
  404: (data) => (<div {...data} />),
  500: (data) => (<div {...data} />),
  503: (data) => (<div {...data} />),
  429: (data) => (<div {...data} />),
}

const loading = data => (<div>...loading...<br />{JSON.stringify(data.url)}</div>)

<ApolloProvider client={client}>
  <MemoryRouter>
    <div>
      <div>
        Top menu:
        <Link to="/">Home</Link>
        <Link to="/vole">Destinace: Hurghada</Link>
        <Link to="/kariera">Redir</Link>
        <Link to="/abdef">Error 404</Link>
      </div>
      <Switch>
        <ServerRouterApollo templates={templatesMap} loadingComponent={loading} />
      </Switch>
    </div>
  </MemoryRouter>
</ApolloProvider>

Version: 1.3.6