Can't access asp controller routes via browser after react router is cached

Question

I have ASP.NET Core controllers together with a react spa application. ASP uses controller routing and spa uses the react-router. Once the react application is accessed at least once, the browser no longer accepts routes to the ASP controllers via search bar and automatically directs to the default react page.

After clearing the browser cache I can access the asp routes by directly typing the url in browser, until I access the react app again.

Requests from the react app made to the asp controllers via fetch still work.

My end goal is to be able to redirect from the react app to "/authentication/login" in the controller, which can then redirect to an external login. At the moment neither <a href='/authentication/login'>Login</a> nor <Nav.Link as={Link} to='/authentication/login'>Login</a> works.

I suspect that this might be a similar issue but I don't know how to fix it: https://stackoverflow.com/a/51484292/9885454

This solution does not help: https://stackoverflow.com/a/60421359/9885454

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
    services.AddAuthentication(options =>
    {
        options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    })
        .AddCookie(options =>
        {
            options.LoginPath = "/authentication/login";
            options.LogoutPath = "/authentication/logout";
        })
        .AddDiscord(options =>
        {
            options.ClientId = Configuration["Discord:ClientId"];
            options.ClientSecret = Configuration["Discord:ClientSecret"];
        });

    services.AddControllers();
    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "ClientApp/build";
    });
}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeli
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseForwardedHeaders(new ForwardedHeadersOptions
    {
        ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto
    });

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseSpaStaticFiles();

    app.UseRouting();

    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller}/{action=Index}/{id?}");
    });

    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";
        if (env.IsDevelopment())
        {
            spa.UseReactDevelopmentServer(npmScript: "start");
        }
    });
}

App.js

export default class App extends Component {
    static displayName = App.name;

    render() {
        return (
            <>
                <Layout>
                    <Switch>
                        <Route exact path='/' component={GaTracker(Home)} />
                        <Route path='/commands' component={GaTracker(Commands)} />
                        <Route path='/guide' component={GaTracker(Guide)} />
                        <Route path='/user/me' component={GaTracker(User)} />

                        <Redirect to='/' />
                    </Switch>
                </Layout>
            </>
        );
    }
}

Index.js

import 'bootstrap/dist/css/bootstrap.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

export const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');

ReactDOM.render(
    <BrowserRouter basename={baseUrl}>
        <App />
    </BrowserRouter>,
    rootElement);
registerServiceWorker();