Come far funzionare il router react con asset statici, modalità html5, API di cronologia e percorsi nidificati?

Ho pensato che stavo iniziando a capire React Router, ma ho trovato un nuovo muro quando aggiungevo una libreria che carica css per i suoi componenti. Tutto funziona bene quando un navigare da casa mia, alla pagina che contiene il componente, ma quando ho aggiornarlo, gli URL dei font sono rotti ...Come far funzionare il router react con asset statici, modalità html5, API di cronologia e percorsi nidificati?

ho trovato un po 'di puntatore here e here ma senza fortuna finora. E 'un problema comune ? Come aggirare?

Uso il server di sviluppo WebPack con configurazione predefinita creata da yeoman scaffolder.

La libreria che utilizzo è React Fa per visualizzare le icone.

Quando carico la mia app su http://localhost:8000/ tutto viene visualizzato correttamente, quindi si passa a http://localhost:8000/customer/ABCD1234/chat e le mie icone sono ok. Il carattere è stato caricato correttamente.

Poi ho aggiornare la pagina, e vedo nella console:

DOMLazyTree.js 019b:? 56 GET http://localhost:8000/customer/ABCD1234/assets/926c93d201fe51c8f351e858468980c3.woff2

che ovviamente è rotto perché la parte del cliente non dovrebbe essere qui ...

Ecco il mio router finora:

ReactDOM.render(
    <Router history={browserHistory}> 
    <Route path='/' component={App}> 
     <IndexRoute component={Index}/> 
     <Route path='customer/:id'  component={Customer} /> 
     <Route path='customer/:id/chat' component={CustomerChat}/> 
     <Route path="*"     component={ NotFound } /> 
    </Route> 
    </Router> 
, document.getElementById('support-app'));

ho anche provato ad aggiungere un <base href="/"/> al mio index.html, ma ho un bel avvertimento in rosso nella console, quindi forse non è la migliore idea:

Attenzione: Impostazione automatica basename utilizzando è deprecato e sarà rimosso nella prossima major release. La semantica di è leggermente diversa da basename. Si prega di passare il nome base esplicitamente nelle opzioni per createHistory

fonte

2016-04-28 Sephy

Sembra aver definito i percorsi relativi ai vostri beni e le icone nel CSS.

background-image: url('assets/image/myicon.png')

invece, provare un percorso assoluto:

background-image: url('/assets/image/myicon.png')

Come Reagire applicazioni sono applicazioni a pagina singola, e si immette l'app su /, tutti gli URL stanno andando a lavorare bene, non importa la pagina a cui navighi, poiché sono relativi alla radice da cui hai iniziato.

Ma non appena ricarichi la tua pagina su un percorso diverso come /customer/ABCD tutte le tue risorse saranno relative a questo, quindi l'URL errato che vedi nella tua console.

Inoltre, se si utilizza webpack, si può provare a impostare il publicPath nel file di configurazione in questo modo:

... 
output: { 
    path: 'assets', 
    publicPath: '/' 
}, 
...

fonte

2016-05-03 15:34:01 hampusohlsson

In teoria, penso che funzionerebbe, ma il bene in questione è un font, caricato da un font fantastico come ho menzionato. E non posso cambiare il percorso, a meno che non costruisca font fantastico da SCSS per conto mio, ma perdo i vantaggi di CDN ... Ecco il CSS: https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1 /css/font-awesome.min.css – Sephy

Come gestiresti le diverse fonti di risorse statiche. Perché penso che il mio problema potrebbe venire da qualcosa di simile. Come fontawsome sono caricati con un percorso relativo ma le mie immagini provengono da un percorso di asset assoluto, proprio come dici ... – Sephy

Stai usando un semplice CSS nel tuo progetto o SASS? Se quest'ultimo, preferirei includere font-awesome nel mio progetto e ridefinire il percorso di base, che dover gestire più percorsi di risorse: http://fontawesome.io/get-started/ – hampusohlsson

ho hava uno stesso problema.

Add a tag <base href="http://whatever"> alla testa di una pagina contenente HTML di reagire-router utilizzando il default browserHistory
Caricare la pagina - history.js emetterà 2 errori, Attenzione: Impostazione automatica basename utilizzando <base href> è deprecato e verrà rimosso nella prossima versione principale. La semantica di è sottilmente diversa da basename. Si prega di passare il nome di base in modo esplicito nelle opzioni per createHistory
cambiare la storia reagire-router per utilizzare la storia in cui la storia è const history = useRouterHistory(createHistory)({ basename: 'http://whatever' }), che dovrebbe risolvere il problema (come nome base è ormai esplicitamente passato)
ricaricare la pagina

https://github.com/reactjs/react-router/issues/3387

5/9 aggiornamento

Nel mio caso.

index.html

<head> 
    <base href="/" /> 
    <script src="app.js"></script> 
</head> 
<body> 
    <div id="app"> 
    </div> 
</body>

app.js

import { Router , useRouterHistory } from 'react-router' 
import { createHistory } from 'history' 

const browserHistory = useRouterHistory(createHistory)({ basename: '/' }) 

render(
    <Router routes={routes} history={browserHistory}/>, 
    document.getElementById("app") 
);

e ricaricare l'avvertimento alla scompare. spero che questo sia utile.

fonte

2016-05-04 03:27:52 AndyLiou

Come ho menzionato nella mia domanda, l'ho già provato, ho trovato questo problema github. Per sicurezza, l'ho provato di nuovo copiando il codice, ricevo l'avviso anche se ho fatto il punto 3 della tua spiegazione ... – Sephy

Come far funzionare il router react con asset statici, modalità html5, API di cronologia e percorsi nidificati?

risposta

Problemi correlati