title: How Mapping Routes in React Router with Protected Function?
body: <p>I Try To Handling my code with React Route in map and protected function;</p>
  <p>This The array for components;</p>
  <pre><code>import LoginContainers from &quot;../Containers/LoginContainers/LoginContainers&quot;;
  import RegisterContainers from &quot;../Containers/RegisterContainers/RegisterContainers&quot;;
  import ChattingApp from &quot;../Containers/ChattingApp/ChattingApp&quot;;
  
  const RoutesMaster = [
      {
          Path: '/login',
          Component: LoginContainers,
          Title: 'Login',
          AuthRequired: false
      },{
          Path: '/register',
          Component: RegisterContainers,
          Title: 'Register',
          AuthRequired: true
      },{
          Path: '/',
          Component: ChattingApp,
          Title: 'Janus Chat',
          AuthRequired: true
      },
  ]
  </code></pre>
  <p>And this the code in main component;</p>
  <pre><code>import React from 'react';
  import {BrowserRouter, Switch, Route, useHistory} from &quot;react-router-dom&quot;;
  import RoutesMaster from &quot;./RoutesMaster&quot;;
  
  const RoutesRender = (Routes, Key) =&gt; {
      const History = useHistory();
  
      if (Routes.AuthRequired) {
          History.push(&quot;/auth/login&quot;);
      } else {
          return (
              &lt;Route exact key={Key} path={Routes.Path} render={(props) =&gt; &lt;Routes.Component {...props} /&gt;} /&gt;
          )
      }
  }
  
  const RoutesProvider = () =&gt; {
      return (
      &lt;React.Fragment&gt;
          &lt;BrowserRouter&gt;
              &lt;Switch&gt;
                  {RoutesMaster.map((Routes, Index) =&gt; (
                      &lt;RoutesRender Routes={Routes} Key={Index} /&gt;
                  ))}
              &lt;/Switch&gt;
          &lt;/BrowserRouter&gt;
      &lt;/React.Fragment&gt;
  );
  }
  
  export default RoutesProvider;
  </code></pre>
  <p>But it's show this message;
  <strong>&quot;Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
  Check the render method of <code>Router.Consumer</code>.&quot;</strong></p>