react-dynamic-route

Load page component at /src/pages folder based on window.location.pathname

Install

yarn add react-dynamic-route

Prerequisite

1. react & react-router-dom is peerDependencies of react-dynamic-route
2. react 16.8(or later) version is required as react-dynamic-route uses React Hook api

Basic Usage

App.js

import React from 'react'
import { BrowserRouter } from 'react-router-dom'
import DynamicRoute from 'react-dynamic-route'

export default function App() {
  return (
    <BrowserRouter>
      <DynamicRoute
        page={path => import('./pages' + path).then(module => module.default)}
        loading={<div>Loading..</div>}
        props={{
          someProp1,
          someProp2,  // `someProp1` and `someProp2` are transfered to `module.dedault` above finally
        }}
        onError={(e, history) => {
          if (
            /not find module/.test(e.message) &&
            window.location.pathname !== '/404'
          ) {
            history.push('/404')
            return
          }
          throw e
        }}
      />
    </BrowserRouter>
  )
}

Folder structure

src/
  pages/
    login/
      sign-in.js
      sing-up.js
    my-info.js
    404.js
  App.js

Then, routed like below automatically

| path | component | | -------------- | --------------------------- | | /login/sign-in | /src/pages/login/sign-in.js | | /login/sign-up | /src/pages/login/sign-up.js | | /my-info | /src/pages/my-info.js | | /blablabla | /src/pages/404.js |

Recipe

Handling not find module error

load 404 page keeping URL

import React from 'react'
import { BrowserRouter } from 'react-router-dom'
import DynamicRoute from 'react-dynamic-route'

export default function App() {
  return (
    <BrowserRouter>
      <DynamicRoute
        page={path =>
          import('./pages' + path)
            .then(module => module.default)
            .catch(e => {
              if (/not find module/.test(e.message)) {
                return import('./pages/404').then(module => module.default)
              }
              throw e
            })
        }
        loading={<div>Loading..</div>}
        props={{
          someProp1,
          someProp2,  // `someProp1` and `someProp2` are transfered to `module.dedault` above finally
        }}
        onError={(e, history) => {
          if (/Loading chunk \d+ failed/.test(e.message)) {
            window.location.reload()
            return
          }
          throw e
        }}
      />
    </BrowserRouter>
  )
}

dynamic path

You can also use dynamic path like below

import React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import DynamicRoute from 'react-dynamic-route'
import Report from 'pages/report'

export default function App() {
  return (
    <BrowserRouter>
       <Switch>
          <Route path="/report/:date" render={props => <Report {...props} />} />
          <DynamicRoute
            page={path => import('./pages' + path).then(module => module.default)}
            loading={<div>Loading..</div>}
          />      
      </Switch>
    </BrowserRouter>
  )
}