реагировать на хостинг роутера с проблемами в подпапках

Question

Я использую реагирующий маршрутизатор с моим приложением, и все работает локально. Ниже мой код. Проблема в том, что когда я размещаю его в сети, он находится в подкаталоге my-application:

https://www.example.com/my-application

Это нарушает код и не работает должным образом.

Может кто-нибудь посоветовать, как решить эту проблему? Если что-то неясно, пожалуйста, не стесняйтесь спрашивать. Я пробовал бесчисленные подходы, но не могу заставить его работать. Один ответ можно увидеть здесь .

Проблема, которую я получаю, заключается в том, что с текущим кодом он переходит на https://www.example.com/test, а не https://www.example.com/my-application/test. Я думал, что если бы я жестко запрограммировал URL, это бы сработало, но это также нарушает работу приложения.

Код ниже слегка урезан для удаления лишнего кода.

import React, { Component } from 'react';
import styled from 'styled-components'
import { Route, Switch } from 'react-router-dom'


const Home = ({ avatarUrl }) => {
  return (
      <div>
         <Route exact path="/" component={Overview}/>
         <Route path="/test" component={Test}/>
      </div>
  );
};

class App extends Component {

  render() {

    return (
      <section>
        <Nav avatarUrl={ this.props.avatarUrl }/>
        <Switch>
          <Route path="/example" component={Example}/>
          <Route path="/" render={()=><Home
            avatarUrl={ avatarUrl }
          />}/>

        </Switch>
      </section>
    )
  }
}

export default App