react-router-async-component v0.1.2

react-router-async-component

Async route component for React-router

npm i -D react-router-async-component

react-router-async-component provides <Acomponent> tag to load your components lazily.

Usage Example

import React from 'react'
import { render } from 'react-dom'
import { HashRouter, Route, Link } from 'react-router-dom'
import Acomponent from 'react-router-async-component'

const Page = (props) => {

  const 
    page = props.match.params.wildcard || 'index'
  return <Acomponent from={
      import(`page/${page}`)
    } notFound={
      import(`page/notfound`)
    } onError={
      /* new */
      import(`page/error`)
    }/>
}

const Main = () => (
  <HashRouter>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/clock">Clock</Link></li>
      </ul>
      <hr/>
      <Route exact path="/" component={
        () => <Acomponent from={import('page/home')}/>
      }/>
      <Route path="/clock" component={
        () => <Acomponent from={import('page/clock')} name="AliasName"/>
      }/>
      <Route path="/:wildcard?" component={Page}/>
    </div>
  </HashRouter>
)

render(<Main/>, document.querySelector('#app'));

home.jsx

import React, { Component } from 'react'
class Home extends Component {
  render() {
    return (
      <div>Home</div>
    )
  }
}
// props.name === default
export default Home

clock.jsx

import React from 'react'
class Clock extends Component {
  render() {
    return (
      <div>Clock</div>
    )
  }
}
// props.name === AliasName
export { Clock as AliasName }