Если
isAuthenticated = false, public роуты работают, страница 404 не работает.
Если
isAuthenticated = true, возникает ошибка:
react-dom.development.js:23798 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
(Если убираю публичные роуты из App.jsx, то приватные начинают работать)
Как правильно сделать, когда
isAuthenticated = false, работали все паблик роуты, был редирект с приватных роутов, работала 404 страница на несуществующие роуты?
И сделать, когда
isAuthenticated = true, работали все приватные роуты, был редирект с паблик роутов, работала 404 страница на несуществующие роуты?
App.jsx
spoiler<BrowserRouter>
<Suspense fallback={<ScreenSpinner />}>
<Switch>
<PublicRoute isAuthenticated={isAuthenticated}>
<PublicRoutes />
</PublicRoute>
<PrivateRoute isAuthenticated={isAuthenticated}>
<PrivateRoutes />
</PrivateRoute>
<Route>
<NotFoundPage />
</Route>
</Switch>
</Suspense>
</BrowserRouter>
PublicRoute
spoilerexport const PublicRoute = ({ children = null, isAuthenticated = false, ...rest }) => {
return (
<Route
{...rest}
render={({ location }) =>
!isAuthenticated ? (
children
) : (
<Redirect
to={{
pathname: '/',
state: { from: location },
}}
/>
)
}
/>
);
};
PrivateRoute
spoilerexport const PrivateRoute = ({ children = null, isAuthenticated = false, ...rest }) => {
return (
<Route
{...rest}
render={({ location }) =>
isAuthenticated ? (
children
) : (
<Redirect
to={{
pathname: '/login',
state: { from: location },
}}
/>
)
}
/>
);
};
PublicRoutes
spoilerconst routes = [
{
path: 'login',
component: lazy(() => import('pages/LoginPage')),
exact: true,
},
{
path: 'register',
component: lazy(() => import('pages/RegisterPage')),
exact: true,
},
{
path: 'forgot-password',
component: lazy(() => import('pages/ForgotPasswordPage')),
exact: true,
},
];
export const PublicRoutes = () => (
<Switch>
<Suspense fallback={<ScreenSpinner />}>
{routes.map(({ component: Component, path, exact }) => (
<Route path={`/${path}`} key={path} exact={exact}>
<Component id={path} />
</Route>
))}
</Suspense>
</Switch>
);
PrivateRoutes
spoilerconst routes = [
{
path: '',
component: lazy(() => import('pages/HomePage')),
exact: true,
},
];
export const PrivateRoutes = () => (
<Switch>
<Suspense fallback={<ScreenSpinner />}>
{routes.map(({ component: Component, path, exact }) => (
<Route path={`/${path}`} key={path} exact={exact}>
<Component id={path} />
</Route>
))}
</Suspense>
</Switch>
);