title: How to protect routes in core ui react
body: <p>I have downloaded react admin dashboard from core ui, now I need to protect the dashboard routes defined in it, so how can I do that,</p>
  
  <p>routes.js</p>
  
  <pre><code>import React from 'react';
  import Loadable from 'react-loadable'
  
  import DefaultLayout from './containers/DefaultLayout';
  
  function Loading() {
    return &lt;div&gt;Loading...&lt;/div&gt;;
  }
  
  const Breadcrumbs = Loadable({
    loader: () =&gt; import('./views/Base/Breadcrumbs'),
    loading: Loading,
  });
  
  const Cards = Loadable({
    loader: () =&gt; import('./views/Base/Cards'),
    loading: Loading,
  });
  
  const Carousels = Loadable({
    loader: () =&gt; import('./views/Base/Carousels'),
    loading: Loading,
  });
  
  const Collapses = Loadable({
    loader: () =&gt; import('./views/Base/Collapses'),
    loading: Loading,
  });
  
  const Dropdowns = Loadable({
    loader: () =&gt; import('./views/Base/Dropdowns'),
    loading: Loading,
  });
  
  const Forms = Loadable({
    loader: () =&gt; import('./views/Base/Forms'),
    loading: Loading,
  });
  
  const Jumbotrons = Loadable({
    loader: () =&gt; import('./views/Base/Jumbotrons'),
    loading: Loading,
  });
  
  const ListGroups = Loadable({
    loader: () =&gt; import('./views/Base/ListGroups'),
    loading: Loading,
  });
  
  const Navbars = Loadable({
    loader: () =&gt; import('./views/Base/Navbars'),
    loading: Loading,
  });
  
  const Navs = Loadable({
    loader: () =&gt; import('./views/Base/Navs'),
    loading: Loading,
  });
  
  const Paginations = Loadable({
    loader: () =&gt; import('./views/Base/Paginations'),
    loading: Loading,
  });
  
  const Popovers = Loadable({
    loader: () =&gt; import('./views/Base/Popovers'),
    loading: Loading,
  });
  
  const ProgressBar = Loadable({
    loader: () =&gt; import('./views/Base/ProgressBar'),
    loading: Loading,
  });
  
  const Switches = Loadable({
    loader: () =&gt; import('./views/Base/Switches'),
    loading: Loading,
  });
  
  const Tables = Loadable({
    loader: () =&gt; import('./views/Base/Tables'),
    loading: Loading,
  });
  
  const Tabs = Loadable({
    loader: () =&gt; import('./views/Base/Tabs'),
    loading: Loading,
  });
  
  const Tooltips = Loadable({
    loader: () =&gt; import('./views/Base/Tooltips'),
    loading: Loading,
  });
  
  const BrandButtons = Loadable({
    loader: () =&gt; import('./views/Buttons/BrandButtons'),
    loading: Loading,
  });
  
  const ButtonDropdowns = Loadable({
    loader: () =&gt; import('./views/Buttons/ButtonDropdowns'),
    loading: Loading,
  });
  
  const ButtonGroups = Loadable({
    loader: () =&gt; import('./views/Buttons/ButtonGroups'),
    loading: Loading,
  });
  
  const Buttons = Loadable({
    loader: () =&gt; import('./views/Buttons/Buttons'),
    loading: Loading,
  });
  
  const Charts = Loadable({
    loader: () =&gt; import('./views/Charts'),
    loading: Loading,
  });
  
  const Dashboard = Loadable({
    loader: () =&gt; import('./views/Dashboard'),
    loading: Loading,
  });
  
  const CoreUIIcons = Loadable({
    loader: () =&gt; import('./views/Icons/CoreUIIcons'),
    loading: Loading,
  });
  
  const Flags = Loadable({
    loader: () =&gt; import('./views/Icons/Flags'),
    loading: Loading,
  });
  
  const FontAwesome = Loadable({
    loader: () =&gt; import('./views/Icons/FontAwesome'),
    loading: Loading,
  });
  
  const SimpleLineIcons = Loadable({
    loader: () =&gt; import('./views/Icons/SimpleLineIcons'),
    loading: Loading,
  });
  
  const Alerts = Loadable({
    loader: () =&gt; import('./views/Notifications/Alerts'),
    loading: Loading,
  });
  
  const Badges = Loadable({
    loader: () =&gt; import('./views/Notifications/Badges'),
    loading: Loading,
  });
  
  const Modals = Loadable({
    loader: () =&gt; import('./views/Notifications/Modals'),
    loading: Loading,
  });
  
  const Colors = Loadable({
    loader: () =&gt; import('./views/Theme/Colors'),
    loading: Loading,
  });
  
  const Typography = Loadable({
    loader: () =&gt; import('./views/Theme/Typography'),
    loading: Loading,
  });
  
  const Widgets = Loadable({
    loader: () =&gt; import('./views/Widgets/Widgets'),
    loading: Loading,
  });
  
  
  // https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
  const routes = [
    { path: '/', exact: true, name: 'Home', component: DefaultLayout },
    { path: '/dashboard', name: 'Dashboard', component: Dashboard },
    { path: '/theme', exact: true, name: 'Theme', component: Colors },
    { path: '/theme/colors', name: 'Colors', component: Colors },
    { path: '/theme/typography', name: 'Typography', component: Typography },
    { path: '/base', exact: true, name: 'Base', component: Cards },
    { path: '/base/cards', name: 'Cards', component: Cards },
    { path: '/base/forms', name: 'Forms', component: Forms },
    { path: '/base/switches', name: 'Switches', component: Switches },
    { path: '/base/tables', name: 'Tables', component: Tables },
    { path: '/base/tabs', name: 'Tabs', component: Tabs },
    { path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs },
    { path: '/base/carousels', name: 'Carousel', component: Carousels },
    { path: '/base/collapses', name: 'Collapse', component: Collapses },
    { path: '/base/dropdowns', name: 'Dropdowns', component: Dropdowns },
    { path: '/base/jumbotrons', name: 'Jumbotrons', component: Jumbotrons },
    { path: '/base/list-groups', name: 'List Groups', component: ListGroups },
    { path: '/base/navbars', name: 'Navbars', component: Navbars },
    { path: '/base/navs', name: 'Navs', component: Navs },
    { path: '/base/paginations', name: 'Paginations', component: Paginations },
    { path: '/base/popovers', name: 'Popovers', component: Popovers },
    { path: '/base/progress-bar', name: 'Progress Bar', component: ProgressBar },
    { path: '/base/tooltips', name: 'Tooltips', component: Tooltips },
    { path: '/buttons', exact: true, name: 'Buttons', component: Buttons },
    { path: '/buttons/buttons', name: 'Buttons', component: Buttons },
    { path: '/buttons/button-dropdowns', name: 'Button Dropdowns', component: ButtonDropdowns },
    { path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups },
    { path: '/buttons/brand-buttons', name: 'Brand Buttons', component: BrandButtons },
    { path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons },
    { path: '/icons/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons },
    { path: '/icons/flags', name: 'Flags', component: Flags },
    { path: '/icons/font-awesome', name: 'Font Awesome', component: FontAwesome },
    { path: '/icons/simple-line-icons', name: 'Simple Line Icons', component: SimpleLineIcons },
    { path: '/notifications', exact: true, name: 'Notifications', component: Alerts },
    { path: '/notifications/alerts', name: 'Alerts', component: Alerts },
    { path: '/notifications/badges', name: 'Badges', component: Badges },
    { path: '/notifications/modals', name: 'Modals', component: Modals },
    { path: '/widgets', name: 'Widgets', component: Widgets },
    { path: '/charts', name: 'Charts', component: Charts },
  ];
  
  export default routes;
  </code></pre>
  
  <p>Here is the source for <a href="https://github.com/coreui/coreui-free-react-admin-template" rel="nofollow noreferrer">core ui react admin dashboard</a></p>
  
  <p>I know protecting routes defined in App.js ,but here they routes are placed in constant, can anyone please tell me how to protect routes if and only if token is there then routing should happen otherwise don't.</p>