title: Implementing protected routing with react router v6
body: <p>Have created a react js dashboard app with the following versions
  &quot;react-router&quot;: &quot;^6.0.0-beta.0&quot;,
  &quot;react-router-dom&quot;: &quot;^6.0.0-beta.0&quot;</p>
  <p>have to implement a protected routing instance for the app, as of react router v6 above protected routing is a bit different than i'm used to on v5. could someone show me how to add protected routing for this? Thank you for your time!</p>
  <p>here's the app.js</p>
  <pre><code>import 'react-perfect-scrollbar/dist/css/styles.css';
  import React from 'react';
  import { useRoutes } from 'react-router-dom';
  import { ThemeProvider } from '@material-ui/core';
  import GlobalStyles from 'src/components/GlobalStyles';
  import 'src/mixins/chartjs';
  import theme from 'src/theme';
  import routes from 'src/routes';
  
  const App = () =&gt; {
  const routing = useRoutes(routes);
  
  return (
  &lt;ThemeProvider theme={theme}&gt;
    &lt;GlobalStyles /&gt;
    {routing}
  &lt;/ThemeProvider&gt;
  );
  };
   export default App;
  </code></pre>
  <p>and here is the route.js code</p>
  <pre><code>const routes = [
  {
  path: 'app',
  element: &lt;DashboardLayout /&gt;,
  children: [
    { path: 'account', element: &lt;AccountView /&gt; },
    { path: 'reporting', element: &lt;CustomerListView /&gt; },
    { path: 'dashboard', element: &lt;DashboardView /&gt; },
    { path: 'classrooms', element: &lt;ProductListView /&gt; },
    { path: 'settings', element: &lt;SettingsView /&gt; },
    { path: '*', element: &lt;Navigate to=&quot;/404&quot; /&gt; }
  ]
  },
  {
  path: '/',
  element: &lt;MainLayout /&gt;,
  children: [
    { path: 'login', element: &lt;LoginView /&gt; },
    { path: 'register', element: &lt;RegisterView /&gt; },
    {
      path: 'RegisterViewContactDetails',
      element: &lt;RegisterViewContactDetails /&gt;
    },
    { path: 'ForgotPassword', element: &lt;ForgotPassword /&gt; },
    { path: 'RestPassword', element: &lt;RestPassword /&gt; },
    { path: '404', element: &lt;NotFoundView /&gt; },
    { path: '/', element: &lt;Navigate to=&quot;/login&quot; /&gt; },
    { path: '*', element: &lt;Navigate to=&quot;/404&quot; /&gt; }
  ]
  }
  ];
   export default routes;
  </code></pre>