reactjs - How to open function page in new Browser - Stack Overflow

I am trying to open a standalone page that displays a large images in a new Browser window. The page

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

相关推荐

  • reactjs - How to open function page in new Browser - Stack Overflow

    I am trying to open a standalone page that displays a large images in a new Browser window. The page

    7天前
    20

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信