Пользователь не перенаправлен после signOut (), но localStorage очищен - PullRequest
Новая
       23

Пользователь не перенаправлен после signOut (), но localStorage очищен

0 голосов
/ 03 февраля 2020

Я новый разработчик, прежде всего. Я работаю над пользовательским интерфейсом React, и у меня есть signOut() функция в моем App компоненте, которая очищает локальное хранилище (и обновляет несколько параметров аутентификации пользователя до false). Когда вызывается эта функция, она также должна перенаправлять пользователя на домашнюю страницу (<Redirect to="/" />). Локальное хранилище очищается, а состояние обновляется, но пользователь не перенаправляется. Я не понимаю почему. Пожалуйста помоги.

Вот общая структура, с которой мне приходится работать: 

index.jsx

ReactDOM.render(
  <Authorization>
    <App />
  </Authorization>,
  document.getElementById("root")
);

AuthorizationContext.jsx

const Authorization = props => {

  /* Imagine React.createContext() happening here */

  const [loggedIn, updateLoggedIn] = useState(false);

 /* Imagine AWS Cognito stuff and export Authorization.Provider, Authorization.Consumer */

}

App.js

const App = () => {

  const authContext = useContext(AuthorizationContext);

  useEffect(() => {
   /* Some auth-related conditions here but not relevant to signOut */
  }, []);


   const signOut() {
    /* This works, local storage is cleared: */
    localStorage.clear();
    authContext.updateLoggedIn(false);

    /* This does not work; User stays on same page but local storage is cleared: */
    return <Redirect to="/" />;
  };

  return (

    <Router>
      <Site
        signOut={signOut}
        loggedIn={loggedIn}
      >
        <Switch>
          <Route path="/" component={Home} />
          <Route path="/purchases" component={Purchases} />
        </Switch>
     </Site>
    </Router>
  );
};

export default App;

import { withRouter } from "react-router-dom"

Site.jsx

const Site = ({ loggedIn, signOut }) => {

 /* Imagine HTML elements for a website including a dropdown with a sign in component */

 <nav>
   {loggedIn ? (
      <button
        onClick={() => updateUserDropdown(!userDropdown)}
      >
        {userDropdown && <UserDropdown signOut={signOut} />}
      </button>
   )}
 </nav>
 <nav>
  <ul>
  {loggedIn && (
    <li>
      <Link
        to="/purchases"
      >
        Purchases
      </Link>
    </li>
  )}
  {loggedIn && (
    <li>
      <button
        onClick={signOut}
      >
        Sign Out
      </button>
    </li>
   )}
 </ul>
</nav>
};

export default withRouter(Site);

Итак, функция signOut() передается Site и UserDropdown.

  • Добавление перенаправления к функции signOut() в компоненте App не перенаправляет пользователя.
  • Я добавил перенаправление на UserDropdown и попытался использовать его в функции после signOut, но это не сработало.
  • Я пытался использовать Link вместо Redirect. Та же разница.
  • Я не очень хорошо понимаю history.push, но я попробовал несколько предложений StackOverflow, но безуспешно ... withRouter - экспортируемая упаковка Site, но функция signOut встречается в App. Я также пытался экспортировать withRouter на уровне App, но это сломало все с ошибками.
...