Crea build React App non funziona correttamente
Salve, sono un nuovo sviluppatore di CRA. Ho un progetto e l'avevo creato con l'app create React. Quando lo uso run npm run build, non è possibile impostare la home page che ha solo un pulsante per il test. Ho aggiunto react-router-dom e la homepage: "./" nel mio package.json . In localhost posso usare e vedere tutto correttamente ma quando lo provo non npm run buildriesco a raggiungere nulla e build mi mostra la pagina vuota. Cosa dovrei fare? Mi hai un consiglio? Non so niente se tutto funziona correttamente.
App.Tsx:
import React from 'react';
import { Route, Switch,BrowserRouter } from 'react-router-dom';
import HomeDashboard from './containers/Home'
function App() {
return (
<div className="App">
<BrowserRouter>
<Switch>
<Route exact path="/home" component={HomeDashboard}></Route>
<Route exact path="/" component={HomeDashboard}></Route>
</Switch>
</BrowserRouter>
</div>
);
}
export default App;
package.json:
{
"name": "test",
"version": "0.1.0",
"private": true,
"homepage": "./",
"dependencies": {
"@types/react-dom": "^16.9.8",
"@types/react-router-dom": "^5.1.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"typescript": "^3.9.7"
},
"scripts": {
"build": "react-scripts build",
},
"eslintConfig": {
"extends": "react-app"
},
}
cartella build:
Risposte
Questo è previsto. Il tuo build si index.htmlriferisce a tutti i file javascript e css tramite un collegamento assoluto, che non funzionerà se lo apri semplicemente sulla tua macchina. Devi servirlo da un server. A livello locale potresti usare il servepacchetto npm per questo:
npm install -g serve
cd ./build
serve .
Il npm run buildcomando compila semplicemente la tua applicazione react in puro html, javascript, css.
Non lo pubblica sul tuo localhost o da qualche altra parte. Puoi vedere l'app creata aprendo /build/index.html con un browser, ma questo potrebbe non funzionare a causa di percorsi realistici, routing e criteri di cors.
Puoi seguire le istruzioni nei documenti e utilizzarlo serveper pubblicarlo:https://create-react-app.dev/docs/deployment/