CODEWITHSUNDEEP
react-router
aaron
aaron

Reputation: 181

Basename not working properly

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;
}

Upvotes: 18

Views: 22772

Answers (5)

amit chandra
amit chandra

Reputation: 1

<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.

Upvotes: 0

Vishwajeet Mishra
Vishwajeet Mishra

Reputation: 446

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>

Upvotes: 2

Dave
Dave

Reputation: 4436

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>

Upvotes: 5

Per Thoresson
Per Thoresson

Reputation: 131

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;
}

Upvotes: 10

mauvm
mauvm

Reputation: 3646

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. [email protected] uses [email protected], while history is already at 4.5.1. So make sure you install the correct version of the history package.

Upvotes: 5

Related Questions