Почему изменение маршрута вызывает .info / connected onDisconnect () для вызова?

Question

Зачем React Router отключать текущего Firebase AuthUser при проверке статуса авторизации для другого маршрута?

Когда я переключаюсь между Маршрутами (Домой, Учетная запись и т. Д.), Вызывается функция onDisconnect (), и каждый раз состояние меняется с подключенного на отключенное обратно на подключенное в течение пары секунд.

Маршруты:

const App = () => (
    <Router>
        <div>
        <CustomNavbar />
        <Switch>
            <Route path={ROUTES.SIGN_UP} component={SignUpPage} />
            <Route path={ROUTES.SIGN_IN} component={SignInPage} />
            <Route path={ROUTES.PASSWORD_FORGET} component={PasswordForgetPage} />
            <Route exact path={ROUTES.HOME} component={HomePage} />
            <Route path={ROUTES.ACCOUNT} component={AccountPage} />
            <Route path={ROUTES.ADMIN} component={AdminPage} />
            <Route path={ROUTES.MANAGER} component={Manager} />
            <Route path={ROUTES.DEFAULT_SETTINGS} component={DefaultSettings} />
            <Redirect to={ROUTES.HOME} />
        </Switch>
        </div>  
    </Router>

    );

export default withAuthentication(App);

Auth User Listener:

      this.listener = this.props.firebase.onAuthUserListener(
        authUser => {
            this.setState({ authUser });

            var myConnectionsRef = this.props.firebase.db.ref('users/'+authUser.uid+'/connected')

            var connectedRef = this.props.firebase.db.ref('.info/connected');

            connectedRef.on('value', function(snap) {
              console.log(snap.val())
              if(snap.val() === true){
                  myConnectionsRef.onDisconnect().set(false).then(() => {
                  myConnectionsRef.set(true);
                })
              }
            });    
        });

Answer 1

Кажется, я решил свою проблему.

Я использую компонент React Boostrap Navbar, который включает в себя этот тег:

<Nav.Link>

Я подставил это для тега React Router:

<Link>

Чтобы сохранить стиль, который у меня был раньше, просто оберните тег так:

  <Nav.Link>
       <Link to={ROUTES.DEFAULT_SETTINGS}> Settings </Link>
  </Nav.Link>

... исправлена ​​потеря соединения во время изменения маршрута при сохранении стиля.

С:

<Nav.Link href={ROUTES.DEFAULT_SETTINGS}> Settings </Nav.Link>

Не изменяет маршруты должным образом, но обновляет страницу, есть ли более правильная практика для отображения ссылки Bootstrap?