Basename not working properly - react-router

Question

I'm attempting to use a basename with react-router as documented on the react-router docs. This is due to base href being deprecated.
Here is what I have now:
import { Route, Router, useRouterHistory } from 'react-router';
import { createHistory } from 'history';
import { render } from 'react-dom';
var history = useRouterHistory(createHistory)({
basename: '/subdirectory'
});
render(
<Router history={history}>
<Route path='/' component={App}>
<Route path='next' component={Next} />
</Route>
</Router>,
document.getElementById('root')
);
When I go to http://the-url.com/subdirectory the page loads as expected (rendering the App component). However, when going to http://the-url.com/subdirectory/next, I get a 404 error. My nginx config is:
location /subdirectory {
alias /path/to/index.html;
index index.html;
try_files $uri $uri/ /path/to/index.html;
}

Answer 1

Here is how I managed to get it to work
Set Router basename to your subdirectory like this
<Router basename="/subdirectory">
If you used create-react-app and are building using npm run build you need to set homepage in package.json for the paths to be correct in the production build
homepage: "{http://www.the-url.com/subdirectory}"
For the nginx config, let's assume your index.html is under /path/to/subdirectory/index.html. Then the following should work
location /subdirectory {
root /path/to;
try_files $uri $uri/ /subdirectory/index.html;
}

Answer 2

I solved it by using:
import { Router, useRouterHistory } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'
const history = useRouterHistory(createBrowserHistory)({
basename: '/',
})
<Router history={history}>
I think the issue was different versions of the history package. react-router#2.2.4 uses history#2.1.2, while history is already at 4.5.1.
So make sure you install the correct version of the history package.

Answer 3

Using BrowserRouter
helpers/history.js
import { createBrowserHistory } from "history";
export default createBrowserHistory();
index.js
import {BrowserRouter as Router} from "react-router-dom";
import history from "helpers/history";
.....
<Router history={history} basename={'/app'}>
...
</Router>
Using Router
helpers/history.js
import { createBrowserHistory } from "history";
export default createBrowserHistory({ basename: '/app' });
index.js
import {Router} from "react-router-dom";
import history from "helpers/history";
....
<Router history={history}>
...
</Router>

Answer 4

This is too sad that react documentation does not specify anything regarding basename in react router v6. however, I tried something and it worked. please find below solution. cheers!
<HashRouter>
<Routes>
<Route path='/app'> {/* put url base here and nest children routes */}
<Route path='path1' element={ <Somecomponent1 /> } />
<Route path='path2' element={ <Somecomponent2 /> } />
</Route>
<Route path="/*" element={<Navigate to="/app/path1" />} /> {/* navigate to default route if no url matched */}
</Routes>
</HashRouter>

Answer 5

<HashRouter>
<Routes>
<Route path='/app'> {/* put url base here and nest children routes */}
<Route path='path1' element={ <Somecomponent1 /> } />
<Route path='path2' element={ <Somecomponent2 /> } />
</Route>
<Route path="/*" element={<Navigate to="/app/path1" />} /> {/* navigate to default route if no url matched */}
</Routes>
</HashRouter>
I was struggling this issue from 2 days approx. This article was very helpful for me.