Tengo un problema con el enrutamiento de BrowserRouter después de ejecutar yarn build en mi proyecto ReactJS. Durante el desarrollo (yarn start) todo funciona como debería, pero después de la construcción, index.html muestra solo una página en blanco. La consola de Chrome no muestra ningún error y la red puede obtener todos los archivos .js y .css.

Mi archivo App.js se ve así:

import React, { Component } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

import withTracker from "./withTracker";

import DefaultLayout from "../src/layouts/Default";
import LoginLayout from "../src/layouts/Empty";

import Overview from "../src/views/Overview";

import "bootstrap/dist/css/bootstrap.min.css";
import "./shards-dashboard/styles/shards-dashboards.1.1.0.min.css";

export default class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route
            path="/"
            exact
            component={withTracker(props => {
              return (
                <DefaultLayout {...props}>
                  <Overview {...props} />
                </DefaultLayout>
              );
            })}
          ></Route>
        </Switch>
      </BrowserRouter>
    );
  }
}

Cuando cambio mi enrutador App.js de BrowserRouter a HashRouter, así:

import React, { Component } from "react";
import { HashRouter, Route, Switch } from "react-router-dom";

import withTracker from "./withTracker";

import DefaultLayout from "../src/layouts/Default";
import LoginLayout from "../src/layouts/Empty";

import Overview from "../src/views/Overview";

import "bootstrap/dist/css/bootstrap.min.css";
import "./shards-dashboard/styles/shards-dashboards.1.1.0.min.css";

export default class App extends Component {
  render() {
    return (
      <HashRouter>
        <Switch>
          <Route
            path="/"
            exact
            component={withTracker(props => {
              return (
                <DefaultLayout {...props}>
                  <Overview {...props} />
                </DefaultLayout>
              );
            })}
          ></Route>
        </Switch>
      </HashRouter>
    );
  }
}

Funciona normalmente después de la construcción, así que creo que es un problema con el BrowserRouter. También intenté agregar el nombre base a BrowserRouter a esto:

<Router basename={""}>

Y esto:

<Router basename={"/"}>

Pero ninguno de ellos resuelve el problema. Qué estoy haciendo mal ?

Editar:

Agregando un poco más de información:

Intenté compilar con mi página de inicio package.json configurada en "./" y "." pero sigue construyendo la página en blanco

1
Pedro Neri 21 oct. 2019 a las 17:34

1 respuesta

La mejor respuesta

Configure package.json con:

"homepage": "."

Y reconstruir

1
Oleg 21 oct. 2019 a las 14:36