I had once made a project that had similar requirement. In that, instead of declaring dynamic routes, I fetched a routes array from the state which was an object array with component, path, and few other parameters. By default I added the initial landing page and not found page:

const [routes, setRoutes] = React.useState([
{
 component: HomeComponent,
 path: '/',
},
{
 component: NoMatchPage,
 path: '*',
}
])

And then I had the request in a useEffect block which would update this state like so:

React.useEffect(()=>{
 // call api()
 const oldRoutes = routes;
 const noMatchPage = oldRoutes.pop();
 const newRoutes = [...oldRoutes, 
    responseFromApi.map(
     routeItem => 
        ({
          component: ComponentName, 
          path: routeItem.path
        })
     ), noMatchPage]
 setRoutes(newRoutes)
},[])

Edit 1 : Cause I'm forgetful

Sorry, I forgot the main part, here's how the Route rendering would be:

<Switch>
    {
      routes.map(routeItem =>
        <Route path={routeItem.path} component={routeItem.component} />
      )
    }
</Switch>

Also if you want to avoid the extra code in useEffect, you could simply do this:

React.useEffect(()=>{
 // call api()
 setRoutes(responseFromApi.map(
     routeItem => 
        ({
          component: ComponentName, 
          path: routeItem.path
        })
     ))
},[])

and then

<Switch>
    <Route exact path={["/home", "/"]} component={Home} />
    {
      routes.map(routeItem =>
        <Route path={routeItem.path} component={routeItem.component} />
      )
    }
    <Route component={NotFound} />
</Switch>

Edit 2 : Cause I'm ignorant

In the case where the user enters the URL directly and Switch is unable to identify the Route and therefore loads the NotFoundPage, you could do the following:

1. Set a condition when you start loading your paths, inside your useEffect block:

const [loading, setLoading] = React.useState(false);
React.useEffect(() =>
    {
      setLoading(true);
      // load paths
      setLoading(false);
    }, [])

2. While the fetch is in progress, show a Loader to the user:

return
    (
    <>
        {
           loading ? 
             <LoaderComponent /> : 
             <Switch>
                // same as before
             </Switch>
        }
    </>
    )

Preferable show something for the user to read, so they don't get irritated, cause patience is a thing of the past. Hope this helps!

If you want to do this with a React Context then this is the pattern I'd suggest. Create a React Context that holds the API logic to fetch a "base path" and expose that out to consumers. Consumers will take the provided "base path" value and prepend it to all link targets and route paths.

Example:

BasePathProvider

import { createContext, useContext } from "react";

const BasePath = createContext({
  basepath: ""
});

const BasePathProvider = ({ children }) => {
  ... logic to fetch basepath ...

  return (
    <BasePath.Provider value={{ basepath }}>
      {children}
    </BasePath.Provider>
  );
};

const useBasePath = () => useContext(BasePath);

Header

const Header = () => {
  const { basepath } = useBasePath();

  return (
    ...
    <Link to={`${basepath}/`}>Home</Link>
    <Link to={`${basepath}/account/${/* some id value */}`}>
      Account
    </Link>
    ...
  );
};

App

function App() {
  return (
    <div className="App">
      <Header />
      <BasePath.Consumer>
        {({ basepath }) => (
          <Switch>
            <Redirect from={`${basepath}/`} exact to={`${basepath}/home`} />
            <Route path={`${basepath}/home`} component={Home} />
            <Route path={`${basepath}/account/:id`} component={Account} />
            <Route component={NotFound} />
          </Switch>
        )}
      </BasePath.Consumer>
    </div>
  );
}

index.js

import { BrowserRouter as Router } from "react-router-dom";
import BasePathProvider from "../path/to/BasePathProvider";

...

<Router>
  <BasePathProvider>
    <App />
  </BasePathProvider>
</Router>

Note: You might also want/need to implement a "loading" state to conditionally render the BasePathProvider component's children until the basepath value has been fetched.