Один и тот же компонент отображается в частном и обычном маршруте с разными путями - работает как в частном маршруте для обоих

Question

Я реализовал автоматический вход через SSO для моего корневого пути "/", чтобы упростить жизнь пользователя, перенаправив на "/ login" с PrivateRoute, и он работает нормально - он перенаправляет на / login, если не вошел в систему, и аутентифицируется через SSO:

const Routes = () => (
<div className="view-routes">
<ErrorBoundaryRoute path="/login" component={Login} />
<ErrorBoundaryRoute path="/loggedout" component={HomePanel} />
<Switch>
  <ErrorBoundaryRoute path="/logout" component={Logout} />
  <PrivateRoute path="/" component={HomePanel} hasAnyAuthorities={[AUTHORITIES.USER]} />
</Switch>
</div>
);

Проблема в том, что мой компонент Logout выглядит следующим образом:

export class Logout extends React.Component<ILogoutProps> {
 componentDidMount() {
    this.props.logout();
 }

render() {
 return (
  <div className="p-5">
    <h4>Logged out successfully!</h4>
    <Redirect
      to={{
        pathname: '/loggedout'
      }}
    />
  </div>
 );
 }
}

Как вы можете видеть в Routes, / loggedout сопоставляется с той же HomePanel, но на этот раз через «обычный»маршрут, который должен избегать автоматической аутентификации.Он действительно выходит из системы, но когда он по какой-то причине перенаправляется в / loggedout, он сразу же после этого идет в путь "/", который снова вызывает автологин.

Мой вопрос: почему он просто не рисует мою HomePanel, а вместо этогоработает так, как будто снова прошел PrivateRoute?В случае, если реакция должна сработать, как мне справиться с выходом из системы в такой ситуации?

Answer 1

Хорошо.React работает так, как он должен работать, и можно использовать один и тот же компонент в частном и обычном маршруте.

Проблема была вызвана тем, что метод выхода из системы имеет URL-адрес возврата:

export const logout = () => dispatch => {
  window.location.href = SAML_LOGOUT + `?return=${encodeURIComponent(LOGOUT_URL)}`;
};

Итак, перенаправление произошло дважды: один раз в методе выхода из системы и другой раз в компоненте.Я изменил их на то же значение, и теперь оно отлично работает.

Answer 2

Ваш оператор Switch размещен неправильно, поскольку он проверяет только /logout и /. Если пользователь посещает /login, /loggedout. в обоих случаях соответствующий маршрут будет отображаться вместе с маршрутом /

Измените свой код на

const Routes = () => (

    <div className="view-routes">
        <Switch>
          <ErrorBoundaryRoute path="/login" component={Login} />
          <ErrorBoundaryRoute path="/loggedout" component={HomePanel} />
          <ErrorBoundaryRoute path="/logout" component={Logout} />
          <PrivateRoute path="/" component={HomePanel} hasAnyAuthorities={[AUTHORITIES.USER]} />
        </Switch>

    </div>

);