React Router v6 Outlet 似乎重置了所有 Session 数据

Question

这是我的App.tsx文件的核心部分：

const App = () => {
  return (
    <div className={styles.app}>
      <Store>
        <Header />
        <SessionMgr />        
        <Banner />
        <Routing />
        <Footer />
      </Store>
    </div>
  );
};

<Routing />包含我的应用程序中的所有路由。 这是它的精简版：

const Routing = () => {
  return (
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/about' element={<About />} />
      <Route path='/signin' element={<SignIn />} />

      <Route element={<ProtectedRoutes />}>
        <Route path='/settings' element={<Settings />} />
      </Route>

      <Route path="*" element={<NotFound />} />
    </Routes>
  );
};

今天，在做了一些研究之后，我实现了ProtectedRoutes ：

const ProtectedRoutes = () => {
  const sessionContainer = Session.useContainer();
  const isAuthenticated = sessionContainer.isLoggedIn();
  console.log(isAuthenticated, sessionContainer.state.user);
  return (isAuthenticated ? <Outlet /> : <Navigate to='/signin' />);
};

我相信我已经正确地使用了<Outlet /> 。 但是，当用户登录时，因此isAuthenticated = true ， Outlet会清除我的所有 session 数据。 换句话说，不是重定向到Settings组件，而是清除 session 数据并将用户重定向到SignIn 。 如果我在浏览器中刷新应用程序，也会发生这种情况。

在应用程序的其他地方，从一个页面导航到另一个页面，session 数据的这种清除不会发生。 鉴于<Store>...</Store>正在包装其他所有内容，如何使用Outlet清除全局存储的内容？

更重要的是，有人对如何解决它有任何想法吗？

Answer 1

@Drew Reese 的评论让我以一种更开箱即用的方式思考，从而解决了问题。 正如 Drew 所指出的那样， Outlet并不是罪魁祸首。

下面是我测试这个新的ProtectedRoutes.tsx包装器组件的方法：

1. 确保用户已注销。 手动尝试 go 到http://localhost:3000/settings并确保一个不能； 重定向到SignIn发生。 到目前为止很棒。
2. 登录。 Go 来测试我用来测试这个的页面。
3. 我有一个已构建的自定义Button组件。 我正在使用此代码进行测试： <Button type={ButtonType.Link} text="Go to Settings page" url='/settings' />它最终呈现此代码： <a href={url} className={styles.link} onClick={onClick}>{text}</a>
4. 错误在那里^^^。 当我注意到比在 SPA 中简单地更改页面需要更长的延迟时，我意识到了这一点。 这让我回想起这样一个事实，即如果event?.preventDefault(); ，许多事件处理程序将导致同样的事情发生。 不包括在内。 添加它，一切正常。
5. 所以我注释掉了 Button 代码，而是使用了这种风格： <Button type={ButtonType.Link} text="Go to Settings page" onClick={() => navigate('/settings')} /> 。 一切都很完美！

再次感谢@Drew Reese 的帮助。 它不仅解决了我发布的错误，而且我还意识到我的 Button 组件的a href={url}版本不能正常工作！ 我将尝试修改它，但使用target='_blank'属性，这应该允许它适用于外部链接。