Allow certain routes to bypass the router when using createBrowserRouter

[JohnnyRacer]

Hello, I am trying to access my API routes which are proxied to share the same URL name as the React router page. When I make requests to the API path, it will return the React page's index.html, which blocks any potential API requests from going through. However, there doesn't seem to a way to achieve this properly.

# Application route tree
└── https://testdomain.com/
    ├── /api # Entire root route needs to bypass router to allow for API access to share the route
    │   ├── /api/hello
    │   └── /api/whatsup
    ├── /hello
    ├── /whatsup
    ├── /static # Some routes remain from createBrowserRouter
    └── /about

Creating the router

import {
    createBrowserRouter,
    Outlet
  } from "react-router-dom";

import NavBar from './components/NavBar';
import Hello, {helloLoader} from './components/Hello';

const browserRouter = createBrowserRouter([
    path : "/",
    element: (
        <>
        <NavBar />
        </>
    ),
   children : [
   { path : "/hello"
     element : (
     <Hello />
     ),
    loader : (
       helloLoader // Loads data from API and consumed within component with useDataLoader();
   }
.... // Add and import the rest of the routes
]);

I tried to add a path for /api but it just seems to render a blank page and still block the API request when I attempt to fetch data. I've tried to using a different root domain as a way around this but dealing with CORS is a pain that I would like to avoid. With the BrowserRouter where I added in routes via the <Route> element, this was not an issue as by default it would go to local route first instead of being redirected automatically. Is there a way I can get this to work?

[brophdawg11]

When I make requests to the API path, it will return the React page's index.html

This sounds like a server setup issue - you are in control of what routes should return index.html:

// Send /api/* through to your API rotues
app.get('/api', handleApiRequest);

// Render everything else via React Router and the index.html page
app.get('*', handleAppRequest);

[krishna-404]

Hi @JohnnyRacer did you find a workaround to this? I am facing the exact issue.