README

react base routing

Layout based router for react. Used react-router-dom. Layout state is not reset when navigating to pages of the same layout

Installation

npm i react-base-routing

yarn add react-base-routing

Usage

Create routes.js with paths schema like this

import { AuthLayout, DefaultLayout } from './layouts';
import { AboutPage, HomePage, LoginPage } from './pages';

export default [
    {
        layout: AuthLayout,
        routes: [
            {
                path: ['/login', '/sign-in'],
                exact: true,
                component: LoginPage,
            },
        ],
    },
    {
        layout: DefaultLayout,
        routes: [
            {
                path: '/',
                exact: true,
                render: () => HomePage({ title: 'HomePage' }),
            },
            {
                path: '/about',
                exact: true,
                component: AboutPage,
            },
        ],
    },
];

Create your layout. Each layout must have children prop to render pages

import React from 'react';

const DefaultLayout = ({ children }) => {
    return (
        <main>
            <h4>Default Layout</h4>
            {children}
        </main>
    );
};

export default DefaultLayout;

Create simple page

import React from 'react';

const LoginPage = () => {
    return <h1>Login Page</h1>;
};

export default LoginPage;

On your App.js include router component

import React from 'react';
import { BaseRouting } from 'react-base-routing';
import routes from './routes';

const App = () => {
    return <BaseRouting routes={routes} />;
};

Advanced

You can handle 404 route by passing notFoundPage prop to base component

<BaseRouting routes={routes} notFoundPage={NotFoundPage} />

404 page not use layout. This is only page

You can use SimpleBaseRouting with simple routing schema (without layouts)

Create simple paths schema like this

import { AboutPage, HomePage, LoginPage } from './pages';

export default [
    {
        path: ['/login', '/sign-in'],
        exact: true,
        component: LoginPage,
    },
    {
        path: '/',
        exact: true,
        render: () => HomePage({ title: 'HomePage' }),
    },
    {
        path: '/about',
        exact: true,
        component: AboutPage,
    },
];

In your App include SimpleBaseRouting instead BaseRouting

import React from 'react';
import { SimpleBaseRouting } from 'react-base-routing';
import routes from './routes';

const App = () => {
    return <SimpleBaseRouting routes={routes} />;
};

You can pass paths array to any Router component

import React from 'react';
import { BaseRouting } from 'react-base-routing';
import routes from './routes';

const App = () => {
    const paths = ['/', '/about'];
    return <BaseRouting routes={routes} paths={paths} />;
};

This will tell the router to show a 404 page if there is no page path in the path array.

Live Demo

See example at this link

Code Example

example

Usage no npm install needed!