@lexstile

Как корректно настроить роутинг через react-router-dom v. 5.3?

Если 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
spoiler
export const PublicRoute = ({ children = null, isAuthenticated = false, ...rest }) => {
  return (
    <Route
      {...rest}
      render={({ location }) =>
        !isAuthenticated ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: '/',
              state: { from: location },
            }}
          />
        )
      }
    />
  );
};

PrivateRoute
spoiler
export const PrivateRoute = ({ children = null, isAuthenticated = false, ...rest }) => {
  return (
    <Route
      {...rest}
      render={({ location }) =>
        isAuthenticated ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: '/login',
              state: { from: location },
            }}
          />
        )
      }
    />
  );
};

PublicRoutes
spoiler
const 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
spoiler
const 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>
);
  • Вопрос задан
  • 48 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы