maiconkeller/mk-routes

A very simple react routes component

mk-routes

Install

npm install --save mk-routes

or

yarn add mk-routes

Usage

import React, { Component } from 'react'
import MkRoutes from 'mk-routes'

import { routes } from './RoutesUtils' // public and private routes
import { isLogged } from './SecurityUtils' // validate isLogged function with boolean return

class Example extends Component {
  render () {
    return <MkRoutes routes={routes} isLogged={isLogged} />
  }
}

Others Classes

./RoutesUtils
Define yours public or private routes

import HomeContainer from '../home/HomeContainer';
import LoginContainer from '../auth/LoginContainer';
import ForgotContainer from '../auth/ForgotContainer';
import ResetContainer from '../auth/ResetContainer';
import UserContainer from '../users/UserContainer';
import UserFormContainer from '../users/UserContainerForm';

import Base from './Base' // component base (menu, sidebar, content)

export const routes = [
  { type: 'protected', mode: "view", exact: true, path: "/", component: HomeContainer, componentBase: Base },

  { type: 'anonymous', mode: "auth", exact: true, path: "/auth/signin", component: LoginContainer },
  { type: 'anonymous', mode: "auth", exact: true, path: "/auth/forgot", component: ForgotContainer },
  { type: 'anonymous', mode: "auth", exact: true, path: "/auth/reset", component: ResetContainer },

  { type: 'protected', mode: "view", exact: true, path: "/user", component: UserContainer, componentBase: Base },
  { type: 'protected', mode: "edit", exact: true, path: "/user/:id/edit", component: UserFormContainer , componentBase: Base },
  { type: 'protected', mode: "new" , exact: true, path: "/user/new", component: UserFormContaine, componentBase: Baser }
]

./Base
Define your layout with menu, sidebar, content and others

import React, { PureComponent, Fragment } from 'react';

import { Grid } from 'react-bootstrap';

import Menu from './Menu'; // a navbar

class Index extends PureComponent {
  render() {
    return (
      <Fragment>
        <Menu {...this.props} />
        <Grid fluid>
            {this.props.children}
        </Grid>
      </Fragment>
    );
  }
}

export default Index;

License

MIT © maiconkeller