为什么路由更改会触发 .info/connected onDisconnect() 被调用？答案

【问题标题】：Why does a route change trigger .info/connected onDisconnect() to be called?为什么路由更改会触发 .info/connected onDisconnect() 被调用？
【发布时间】：2019-04-19 21:36:40
【问题描述】：

为什么 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);

验证用户监听器：

      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);
                })
              }
            });    
        });

【问题讨论】：

你能把所有相关代码贴在这里吗？
我不确定如何在不添加大量代码的情况下准确显示每个特定部分。希望在处理反应路由器时一般找出这是否是正常行为，或者是否应该永远be "false" 会因为路由改变而断开连接。
没有理由更改路由会断开您的连接，因此查看您在哪里检查身份验证状态以及您的路由是有意义的。
我添加了一些代码
如果您的服务器端断开处理程序 (myConnectionsRef.onDisconnect().set(false)) 被调用，则服务器已失去对客户端的跟踪。如果这种情况持续发生，则实际上意味着当路由更改时，客户端和服务器之间的 Web 套接字已关闭。您可能想要检查网络流量以查看是否正在完成真正的页面转换。如果您不这么认为，您能否在 stackblitz.com 之类的网站上设置问题的重现，以便我们查看？

标签： reactjs firebase firebase-realtime-database jsx

【解决方案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>

没有正确更改路由，而是刷新页面，是否有更合适的做法来显示引导链接？

【讨论】：