I am trying to open a standalone page that displays a large images in a new Browser window. The page PositionOverlayTool.js is part of the REACT project. What I am doing so far is: App.js
import { HashRouter, Routes, Route } from "react-router-dom";
const PositionOverlayTool = lazy(() =>
import("../panorama/overlay/PositionOverlayTool").then((module) => ({ default: module.default }))
);
return (
<ThemeProvider theme={theme}>
<HashRouter>
<Navbar
wsConnected={wsConnected}
WsConnectCB={handleWsConnect}
setResetCB={setReset}
expertMode={expertMode}
setExpertModeCB={setExpertMode}
closeHelp={closeHelp}
setCloseHelpCB={setCloseHelp}
isDirty={isDirty}
basicHide={basicHide}
/>
<Suspense fallback={<h1>Loading...</h1>}>
<Routes>
<Route exact path="/" element={<NavLayout />}>
<Route path="/positionOverlay" element={
<PositionOverlayTool />
}/>
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</Suspense>
</HashRouter>
</ThemeProvider>
);
To open positionOverlay I created a PositoOvreLayButton.js which will use windows.open() to to open positionOverlay in a new Browser.
const newWindow = useRef(null);
const handleOpen = (event) => {
event.preventDefault()
newWindow.current = window.open('#/positionOverlay', 'positionOverlay',
'toolbar=yes,scrollbars=yes,resizable=yes,top=0,left=0,width="100%",height="100%"');
}
This does open the page, but I also am getting the main page with its navigation bar at the top. All I want is the PositionOverlayTool page load, not a clone of the main App.js page with a Navbar and everything else in App.js.
function PositionOverlayTool(props) {
/*
Create the Static Overlay position page.
*/
return (
<>
PositionOverlay
</>
);
}
When I do window.open('/positionOverlay'
the project default page is load, not the positionOverlay page.
How can I load just the positionOverlay page into a new browser?
发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744329456a4568815.html
评论列表(0条)