react-async-router

react asynchronous routing component

Install

$ npm install --save react-async-router

Usage

propsType

interface AsyncRouterProps{
  page:Promise,
  onLoading ?: {
    (): JSX.Element | null
  },
  onNotFound ?: {
    ():JSX.Element | null
  },
  onError ?: {
    (error:Error):JSX.Element | null
  }
}

main.js（Packaged with webpack）

import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter, Route } from 'react-router-dom'
import AsyncRouter from 'react-async-router'

import NotFound from './pages/notfound';
import Error from './pages/error';

const Page = (props) => {
  const params = props.match.params;
  const platform = params.platform ||'admin';
  const md = params.module ? '/' + params.module : '';
  const method = params.method ? '/' + params.method : '';

  return <AsyncRouter page={
    import(`./pages/${platform}${md}${method}`)
  } onNotFound={() => {
    return <NotFound/>;
  }} onError={(error) => {
    return <Error/>;
  }} onLoading={()=>{
    return <div>loading</div>
  }} />
}


render(
  <BrowserRouter>
    <Route path="/:platform?/:module?/:method?" component={Page}/>
  </BrowserRouter>,
  document.getElementById('app')
);

• The onNotFound,onError,onLoading callback function must return React element (or null)
• The callback function is optional

Example

react-easily

License

MIT