dynamically change the basename in react BrowserRouter with API call - reactjs

Question

Recently in a project I've been working on had a requirement to change the content based on the user's location, so we used a third-party service to get the browsing location from IP address and according to the country they are brows from, we have to change the content and the URL of the site to something like this, domainName.com/us so the /us part should be dynamic and I used basename prop in BrowserRouter for that to maintain consistency. but the problem is I can't change the basename dynamically, since the country code comes from an API, it takes some time to fetch, and obviously, it's an async call. state variable I used is updating after data fetch, but the URL in the browser didn't update.
basically, by default, the site will load with the content according to the user's location, but if the user types let's say /uk in the URL after the domain, the site content should be changed according to that and maintain the URL in sitewide operations
here's an example site you can refer
raileurope.com
you can type, let's say as a example /fr after the domain in that site, then the site content will be changed to french, if user type /it the content will be change to italian, like wise.
a new approach to fulfilling this requirement is also welcomed. Thanks in advance.
what I have right now.
react-router-dom: 5.2.0
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
const App = () => {
const [browsFrom, setBrowsFrom] = useState('');
useEffect(() => {
axios.get('https://api64.ipify.org')
.then((res) => {
axios.get(`http://www.geoplugin.net/json.gp?ip=${res.data}`)
.then((response) => {
console.log(response);
setBrowsFrom(`/${response.data.geoplugin_countryCode}`);
}).catch((e) => {
console.log(e);
setBrowsFrom('');
})
}).catch((e) => {
console.log(e);
setBrowsFrom('');
});
}, []);
return (
<Router basename={browsFrom}>
<Switch>
<Route path="/" component={HomeComponent} exact={true} />
<Route
path="/termsAndConditions"
component={TermsPage}
exact={true}
/>
<Route
path="/aboutUs"
component={AboutUsPage}
exact={true}
/>
</Switch>
</Router>
);
}

Answer 1

You can create a history object dynamic based on your sub-path and pass it as a history in <Router history={history}>. You can try this solution.
import React, { useState, useMemo, useEffect } from "react";
import { render } from "react-dom";
import { Router, Link } from "react-router-dom";
import { createBrowserHistory } from "history";
// To demonstrate the ability to have a dynamic
// base route, change the url path and add something
// like: "/test/123/" then refresh the page and
// navigate - then, refresh again.
const Header = () => (
<header>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/sub">Submenu</Link>
</li>
</ul>
</nav>
</header>
);
const Root = () => {
const [path, setPath] = useState("my-app");
const history = useMemo(() => {
return createBrowserHistory({ basename: path });
}, [path]);
useEffect(() => {
console.log(history);
if (path !== "my-app") {
history.replace("/");
}
}, [history, path]);
return (
<Router history={history}>
Current basename – {path}
<Header />
<button
onClick={() => {
setPath("asif");
}}
>
change base path{" "}
</button>
</Router>
);
};
render(<Root />, document.getElementById("root"));