Skip to content

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

License

Notifications You must be signed in to change notification settings

react-backoffice/walls

Repository files navigation

Walls

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

Build Status FOSSA Status

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

FOSSA Status