React Router загружает все компоненты маршрута при прямой навигации

Question

Я использую React Router на моем сайте.

Проблема в том, что когда у посетителя нет кэшированных данных веб-сайта и он переходит на https://domain/myroute, они будут перенаправлены на компонент 404, который я настроил.

Однако, если они сначала перейдут на https://domain/, а затем введут https://domain/myroute, все будет работать нормально.
Я полагаю, проблема заключается в отложенной загрузке компонентов?Не уверен, как настроить его, чтобы при первом посещении работала прямая навигация по маршрутам.

Это логика маршрутизатора из моего файла app.jsx.

export default class App extends Component {
    render() {
        return (
            <div>
                <Switch>
                    <Route exact path="/" component={MainPage} />
                    <Route exact path="/myroute" component={MyRoute} />
                </Switch>
            </div>
        );
    }
}

и используется компонент приложенияв index.js вот так.

ReactDOM.render((
    <Provider store={storeInstance}>
        <BrowserRouter basename={process.env.DEPLOY_BASE_URL === 'gh-pages' ? "/repository-name" : "/"}>
            <App />
        </BrowserRouter>
    </Provider>),
    document.getElementById('root')
);