From 2df67e32daf18676c11d1b18032cd6f1f8614399 Mon Sep 17 00:00:00 2001 From: Hornwitser Date: Mon, 5 Feb 2024 18:46:55 +0100 Subject: [PATCH] Set key for top level page fragment Without a unique per page key set react will try to reuse the existing state and components of the previous page and update them to match the new page. This causes unexpected behaviour as components get turned into into a Frankenstein abomination of the previous page and the current one fused into one. Fix by setting a key on the top level fragment of the page which in turn forces React to re-render the whole page whenever the user switches to another page. --- CHANGELOG.md | 1 + packages/web_ui/src/components/SiteLayout.tsx | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9a507824..fec0adec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - Fixed an unhandled error in Subspace Storage crashing the host. - Fixed an unhandled rejection in disconnect logic crashing the host. - Fixed instance screen in Web UI not updating when an instance was reassigned. +- Fixed an error thrown in the rendering of one page in the Web UI causing all pages to become inaccessible. ## Version 2.0.0-alpha.16 diff --git a/packages/web_ui/src/components/SiteLayout.tsx b/packages/web_ui/src/components/SiteLayout.tsx index 2bf69d47..07a995d1 100644 --- a/packages/web_ui/src/components/SiteLayout.tsx +++ b/packages/web_ui/src/components/SiteLayout.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useEffect, useState } from "react"; +import React, { Fragment, useContext, useEffect, useState } from "react"; import { Route, Routes, useNavigate } from "react-router-dom"; import { Dropdown, Layout, Menu, MenuProps } from "antd"; import UserOutlined from "@ant-design/icons/UserOutlined"; @@ -115,12 +115,12 @@ export default function SiteLayout() { {combinedPages.map(({path, sidebarPath, content}) => + element={ {content} - } + } />)} } />