Метод рендеринга не вызывается в реагирующем маршрутизаторе

Question

Я следую этому руководству, чтобы добавить Firebase Authentication в мое веб-приложение React. js. Но перенаправление, когда пользователь уже вошел в систему, не работает должным образом.

Приложение:

const App = () => {
  return (
    <AuthProvider>
      <Router>
        <div>
          <PrivateRoute exact path={pathNames.teamList} component={TeamList} />
          <Route exact path={pathNames.login} component={PhoneLogin} />
        </div>
      </Router>
    </AuthProvider>
  );
};

Частный маршрут:

const PrivateRoute = ({ component: RouteComponent, ...rest }) => {
  const { currentUser } = useContext(AuthContext);
  return (
    // <Route exact path={!!currentUser ? pathNames.teamList : pathNames.login} />
    <Route
      {...rest}
      render={routeProps => {
        console.log("Props: ", routeProps);
        return !!currentUser ? (
          <RouteComponent {...routeProps} />
        ) : (
          <Redirect to={pathNames.login} />
        );
      }}
    />
  );
};

useContext дает мне значение текущего пользователя.

Если я удаляю {...rest} в Route, то это отчасти работает. Путь по-прежнему /login, но я вижу 2 компонента: 1) Список команд и 2) Вход под ним. Что может быть не так?

Answer 1

pathNames.teamList = "\"
pathNames.login = "\login"

хорошо .. если вы удаляете {...rest}, то вы больше не используете exact prop для частного маршрута. так что вам нужно явно указать path и exact в Route, чтобы он работал.

Если вы не используете exact, он примет путь по умолчанию "\" и отобразит компонент на каждом маршруте. таким образом, вы будете видеть TeamList компонент на каждом маршруте, даже после выхода из системы.

<Route
      exact
      path="\"
      render={routeProps => {
        console.log("Props: ", routeProps);
        return !!currentUser ? (
          <RouteComponent {...routeProps} />
        ) : (
          <Redirect to={pathNames.login} />
        );
      }}
    />

Кроме того, точное использование не потребуется везде.

 <Route path={pathNames.login} component={PhoneLogin} />