Basename non funziona correttamente

Question

Sto tentando di utilizzare un basename con react-router come documentato on the react-router docs. Ciò è dovuto al fatto che base href è deprecato.

Ecco quello che ho adesso:

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') 
 
);

Quando vado al http://the-url.com/subdirectory la pagina viene caricata come previsto (rendendo la componente App). Tuttavia, quando si va a http://the-url.com/subdirectory/next, ottengo un errore 404. Il mio nginx config è:

location /subdirectory { 
    alias /path/to/index.html; 
    index index.html; 
    try_files $uri $uri/ /path/to/index.html; 
} 

Answer 1

ho risolto utilizzando:

import { Router, useRouterHistory } from 'react-router' 
import createBrowserHistory from 'history/lib/createBrowserHistory' 

const history = useRouterHistory(createBrowserHistory)({ 
    basename: '/', 
}) 

<Router history={history}> 

Credo che il problema è stato diverse versioni del pacchetto history. react-router@2.2.4 utilizza history@2.1.2, mentre history è già allo 4.5.1. Quindi assicuratevi di installare la versione corretta del pacchetto history.