Как предотвратить загрузку панели навигации и заголовка во втором электронном окне в моем приложении React-Electron

Question

Я создаю приложение для реактивных электронов и использую роутер. Все работает нормально, кроме создания 2-го окна. Я создаю второе окно с дескриптором onClick на моей кнопке. Вот мой код

onClickHandle () {
        const remote = window.require('electron').remote;
        const BrowserWindow = remote.BrowserWindow;
        let win = new BrowserWindow({
            height: 600,
            width: 800,
            webPreferences: {
            nodeIntegration: true,
        }
        });
        console.log(__dirname)
        //win.loadURL(`file://${__dirname}/index.html#/AddProduct`);
        win.loadURL(window.location.origin + '/public/index.html#/AddProduct')
        win.on("closed", () => (win = null));
    }

Я использую win.loadURL(window.location.origin + '/public/index.html#/AddProduct'), потому что использование win.loadURL(`file://${__dirname}/index.html#/AddProduct`); вызывает ошибку.

Я могу открыть окно, но когда я открываю окно, мой компонент Nav и Header оказано. Я не хочу, чтобы мои компоненты навигации и заголовка загружались, и мне нужен только пустой экран. Вот мой компонент AddProduct, в котором размещается мой второй электронный контент.

import React from 'react'

class AddProduct extends React.Component{
    constructor(){
        super()
        this.state = {
            ProductName : ''
        }
    }

    render(){
        return(
            <h1> Hello World</h1>
        )
    }
}

export default AddProduct

Вот мой файл маршрутизатора

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Switch, Route } from 'react-router-dom'

import LoadHeader from './components/header'
import Nav from './components/Nav'
import Home from './pages/home'
import ProductLookup from './pages/productlookup'
import Sales from './pages/sales'
import Settings from './pages/settings'
import AddProduct from './components/addProduct'

ReactDOM.render(
    <Router>
        <div>
            <main>
                <Nav />
                <LoadHeader />
                <Route exact path="/" component={Home} />
                <Route path="/Sales" component={Sales} />
                <Route path="/ProductLookup" component={ProductLookup} />
                <Route path="/Settings" component={Settings} />
                <Route path='/AddProduct' component={AddProduct}/>
            </main>
        </div>
    </Router>, 
    document.getElementById("root")
)

Мое второе электронное окно - это компонент AddProduct, он должен отображать простую белую страницу только с 'Hello World', но мои компоненты Nav и LoadHeader также отображаются. Как я могу визуализировать только мой компонент AddProduct, а не компоненты Nav и LoadHeader?