React-Router Link необходимо дважды щелкнуть при использовании методов рендеринга в Route - PullRequest
Новая
       11

React-Router Link необходимо дважды щелкнуть при использовании методов рендеринга в Route

0 голосов
/ 26 сентября 2019

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

У меня есть простой поток аутентификации:

Приложение.js 

  const App = ({ currentUser, checkUserSession }) => {
  useEffect(() => {
    checkUserSession();
  }, [checkUserSession ]);

  return (
    <div className="App">
      <Switch>
        <Route path="/homepage" component={HomePage} />
        <Route
          path="/"
          render={() =>
            currentUser ? <Redirect to="/homepage" /> : <SignInSignUpPage />
          }
        />
      </Switch>
    </div>
  );
};

HomePage 

const HomePage = () => {
    return (
        <HomePageComponent/>
    );
};

export default withRouter(HomePage);

HomePageComponent 

const HomePageComponent = ({ dispatch , history }) => {
  return (
        <div
          className="homepage-container--header-link"
          onClick={() => {
            dispatch(signOutStart());
            history.push('/')
          }}
        >
          {" "}
          Sign-Out
        </div>
  );
};

export default withRouter(connect()(HomePageComponent));

В результате необходимо дважды щелкнуть ссылку из реакции-маршрутизатора, чтобы перейтик пути '/'

Я вижу, что диспетчерское действие фактически вызывалось дважды, но изменение пути происходит при втором щелчке.

Я также использую перенаправление на основе значения currentUserпоэтому маршрут должен менять базу только на основе текущего значения пользователя (см. App.js)

...