Walls

Walls is a react-router-dom implementation that builds upon configuration.

Usage

Installing

If you use yarn, just run the following command in your project’s root directory.

yarn add walls

Or using npm:

npm install --save walls

Using with your React-Component

import routes from './routes'

const MyApp = ({ isAuthorized, onUnauthorized }) => (
  <Walls
    routes={routes}
    isAuthorized={isAuthorized}
    onUnauthorized={onUnauthorized}
  />
)

Routes file

You can write a roules config that looks like this (rotes.jsx):

import React from 'react'

export default [{
  private: false,
  exact: true,
  path: '/',
  render: () => (
    <p>Home</p>
  ),
}, {
  private: false,
  exact: true,
  path: '/foo',
  render: () => (
    <p>Foo</p>
  ),
}, {
  private: false,
  exact: true,
  path: '/bar',
  render: () => (
    <p>Bar</p>
  ),
}]

Walls Component

Walls is the main routing component

Properties

• routes: Route[], configuration for all routes
• isAuthorized: boolean, is current user authorized
• onUnauthorized: function, if not authorized, do this

Route

• private: boolean, Is this route protected?
• exact: boolean, Should the path match exactly?
• path: string, path to this route
• render: component, a rendering function
• fallback: component, a rendering function as fallback for private routes

React Router Functions

You can use these React Router functions via Walls:

• Link
• NavLink
• Redirect
• matchPath
• withRouter
• useHistory
• useLocation
• useParams
• useRouteMatch

License

This framework is licensed under MIT