Блог

У меня есть шаблон react, и он использует бета-версию react-router-dom v6.0.0.Методы маршрутизации в этой версии отличаются от предыдущих. Я хочу аутентифицировать запрос с помощью auth.js функция и визуализация соответствующей страницы. В react-маршрутизаторе v5 ему просто нужно было завернуть маршрут в элемент < ProtectedRoute >< ProtectedRoute >.Как я могу получить тот же результат при таком подходе ?

routes.js

 export default function Router() {
  return useRoutes([
    {
      path: '/dashboard',
      element: <DashboardLayout />,
      children: [
        { path: '/', element: <Navigate to="/dashboard/app" replace /> },
        { path: 'app', element: <DashboardApp /> },
      ]
    },
    {
      path: '/',
      element: <LogoOnlyLayout />,
      children: [
        { path: 'login', element: <Login /> },
        { path: 'register', element: <Register /> },
        { path: '404', element: <NotFound / },
        { path: '/', element: <Navigate to="/dashboard" /> },
        { path: '*', element: <Navigate to="/404" /> }
      ]
    },

    { path: '*', element: <Navigate to="/404" replace /> }
  ]);
}

 

auth.js

 function ProtectedRoute({ component: Component, ...restOfProps }) {
  const isAuthenticated = false;
  return (
    <Route
      {...restOfProps}
      render={(props) =>
        isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
}

export default ProtectedRoute;
 

App.js

 import Router from './routes';

export default function App() {
  return (
      <Router />
  );
}