React路由器v6出口似乎重置了所有会话数据

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会清除我的所有会话数据。换句话说，不是重定向到Settings组件，而是清除会话数据并将用户重定向到SignIn。如果我在浏览器中刷新应用程序，也会发生同样的情况。

在应用程序的其他地方，从一个页面导航到另一个页面，这样的会话数据清除不会发生。假设<Store>...</Store>正在包装其他所有内容，那么使用Outlet怎么可能清除全局存储的内容呢？

更重要的是，有人对如何修复它有什么想法吗？

Answer 1

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

以下是我如何测试这个新的ProtectedRoutes.tsx包装器组件：

1. 确保用户已注销。手动尝试转到http://localhost:3000/settings并确保不能；则发生到CCD_ 14的重定向。到目前为止很棒
2. 登录。转到我用来测试这个的测试页面
3. 我已经构建了一个自定义的Button组件。我使用以下代码进行测试：<Button type={ButtonType.Link} text="Go to Settings page" url='/settings' />它最终呈现了以下代码：<a href={url} className={styles.link} onClick={onClick}>{text}</a>
4. bug就在那里^^^。当我注意到在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'属性，这应该允许它为外部链接工作。