React Router allows you to specify a basename for an application. The basename will be stripped off of the pathname and locations will be matched against the remaining part of the path.

For example, if you set a basename of /mysite, then a request to /mysite/page-one will attempt to match the pathname /page-one against your defined routes.

Setting the basename value dynamically would just be a matter of having the value injected into your code in a manner that would allow your code to access that value while creating the history instance which will be used by your <Router>.

One possible solution would be to set a variable on the window when you are rendering the HTML.

window.__BASENAME__ = '/some/root';

You would then be able to access that value in your application when you create your history instance.

const BASENAME = window.__BASENAME__ || '/';
const history = useRouterHistory(createHistory)({
  basename: BASENAME

Related Query

More Query from same tag