Sample guard router for react

react-guard-router.js

import React, { Component } from "react";
import {
  BrowserRouter,
  Route,
  Switch,
  Link,
  Redirect,
  withRouter
} from "react-router-dom";

const userSigned = true;

const routes = [
  {
    title: "",
    path: "/login",
    exact: true,
    component: () => <div>Login Page</div>,
    guard: 1,
    drawer: false
  },
  {
    title: "",
    path: "/",
    exact: true,
    component: () => <div>Dashboard Page</div>,
    guard: 2,
    drawer: true
  },
  {
    title: "",
    path: "/about",
    exact: true,
    component: () => <div>About Page</div>,
    guard: 3,
    drawer: false
  }
];

function GuradRoute(props) {
  switch (props.guard) {
    case 1: {
      if (userSigned) return <Redirect to="/" />;
      else return <Route {...props} />;
    }
    case 2: {
      if (userSigned) return <Route {...props} />;
      else return <Redirect to="/login" />;
    }
    default: {
      return <Route {...props} />;
    }
  }
}

function Router(props) {
  const { routes } = props;
  return (
    <Switch>
      {routes.map(route => (
        <GuradRoute
          key={route.path}
          exact={route.exact}
          path={route.path}
          component={route.component}
          {...props}
          {...route}
        />
      ))}
    </Switch>
  );
}

const Drawer = withRouter(props => {
  const route = routes.find(route => route.path === props.location.pathname);
  return route && route.drawer && <div>Drawer</div>;
});

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <>
          <Router routes={routes} />
          <ul>
            <li>
              <Link to="/login">Login</Link>
            </li>
            <li>
              <Link to="/">Dashboard</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
          <Drawer />
        </>
      </BrowserRouter>
    );
  }
}

export default App;