How to insert slash "/" before slash "#" in route?

Question

I'm using the microfrontend concept and I have two projects, which are:

• Primary
• Secondary

The primary uses BrowserRouter and the secondary HashRouter to not lose remoteEntry and etc.

But the route in the main when accessing and loading the microfrontend is looking like this:

http://localhost:3003/national#/pre-ticket/ABCDEF

But I would like it to look like this:

http://localhost:3003/national/#/pre-ticket/ABCDEF

How can I do this?

PRIMARY PROJECT

<BrowserRouter>
    <GlobalComponents />

    <Switch>
        <Route exact path='/' component={() => <div />} />
        <Route exact path='/404' component={() => <Error404 />} />

        {MICROFRONTEND_LIST.map(({ service, module, registry, data }) => (
            <Route
                exact
                key={data.basename}
                path={data.basename}
                component={() => (
                    <MicrofrontendArsenalComponent service={service} module={module} registry={registry} basename={data.basename} />
                )}
            />
        ))}

        <Route path='*' component={() => <Redirect exact to='/404' />} />
    </Switch>
</BrowserRouter>

SECONDARY PROJECT

<HashRouter>
            <Switch>
                <Route
                    exact
                    path='/'
                    component={HomePage}
                />

                <Route
                    exact
                    path='/pre-ticket'
                    component={CreateOrEditPreTicket}
                />

                <Route
                    path='/pre-ticket/:id'
                    component={CreateOrEditPreTicket}
                />

                <Route
                    path='/suggestedOperation/:id'
                    component={CreateSuggestedOperationPage}
                />

                <Route
                    path='*'
                    component={MemoizedRedirectComponent}
                />
            </Switch>
        </HashRouter>