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

@@ -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

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}) => <Route
 						path={path}
 						key={path}
-						element={<>
+						element={<Fragment key={path}>
 							<SetSidebar path={sidebarPath ? sidebarPath : path} />
 							<ErrorBoundary Component={ErrorPage}>
 								{content}
 							</ErrorBoundary>
-						</>}
+						</Fragment>}
 					/>)}
 					<Route element={<SetSidebar path={null} />} />
 				</Routes>