r17x/react-router-ext

⚛️ An Extended react-router-dom with simple usage.

⚛️ react-router-ext.

An Extended react-router-dom with Simple Usage for ReactJs.

• Just Pass Props & Render All your Component Page.
• With Sub Route Routes -> Routes -> Routes .... -> Routes.
• Have an options for Wrapper.

Table of Contents

• Intall
• Usage
  • Parameters
  • Properties
  • Examples
• Route
  • Properties
• Credits

Install

yarn

yarn add react-router-ext

npm

npm install --save react-router-ext

The UMD build is also available on unpkg:

<script src="https://unpkg.com/react-router-ext@latest/dist/react-router-ext.umd.js"></script>

Usage

An Example usage react-router-ext.

import React from 'react'
import ReactDOM from 'react-dom'
import MainRouter from 'react-router-ext'

/** Example AuthHOC **/
const AuthHOC = (AuthLogic) => (Component) => AuthLogic()
        ? <Component>
        : <div> Not Authorized </div>

/** Component Pages **/
const Home = () => <div> Welcome in my home 🈴 </div>
const BedRoom = () => <div> My BedRoom is Private ❌ </div>
const Room = () => <div> Happy </div>

/** Config route list in Array **/
const routeList = [
    {
        path: '/',
        component: Home,
        exact: true
    },

    {
        path: '/room',
        component: Room,
        exact: true,
        routes: [
            {
                path: '/bedroom',
                component: BedRoom,
                wrapper: AuthHOC(() => false)
            }
        ]
    }
]

// Render
ReactDOM.render(
    <MainRouter routes={routeList} />, 
    document.getElementById('app')
)

API

Parameters

• props Object

Properties

• routes Array<Route>
• children ReactElement

Examples

const routeList = [
 // Basic 
 {
   path: '/',
   component: Home,
   exact: true,
 },
 
 // With Wrapper Component
 {
   path: '/',
   component: Home,
   exact: true,
   wrapper: AuthComponent,
 },

// With Routes
 {
   path: '/',
   component: Home,
   exact: true,
   wrapper: AuthComponent,
   routes: [
     {
       path: '/article',
       component: Article,
       exact: true,
       routes: [
         {
           path: '/categories',
           component: Category,
         },
       ]
     },
   ]
 }
]

// Render
ReactDOM.render(<MainRoute routes={routeList}/>, node)

Returns ReactElement

Route

Type: Object

Properties

• path String Path-sting
• exact Boolean Exact-bool
• component Object Component
• wrapper Function A Wrapper function for component
• routes Array<Route> Route

Credits

• MIT License © 2019 ri7nz
• See: reactjs for use this Project.
• See: react-router-dom The main idea & goals.
• See: Microbundle 🔨 for bundle this Project.