Crea build React App non funziona correttamente

Sep 29 2020

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

2 PhilipFeldmann Sep 29 2020 at 12:37

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 .
1 TasosBu Sep 29 2020 at 12:38

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/