Why is BrowserRouter rendering a blank screen?

Question

I'm having an issue with BrowserRouter routing after running yarn build on my ReactJS project. During development (yarn start) everything works as should but after building, the index.html shows only a blank page. The Chrome console shows no error and the network is able to get all the .js and .css files.

My App.js file looks like this:

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

When I change my App.js Router from BrowserRouter to HashRouter, like this:

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

It works normally after building, so I think it's a problem with the BrowserRouter. I've also tried to add the basename to BrowserRouter to this:

<Router basename={""}>

and this:

<Router basename={"/"}>

But none of them solves the problem. What am I doing wrong ?

Edit:

Adding some more information:

I've tried to build with my package.json homepage set to "./" and "." but it keeps building the blank page

score 2 · Accepted Answer · answered Oct 21 '19 at 14:36

2

Configure package.json with:

"homepage": "."

and rebuild

answered Oct 21 '19 at 14:36

Oleg

3,580
1
7
12

1

I've tried it, but it doesn't work. Still renders a blank page. Also tried to change the base name to "" and "/" with the homepage: "." and it doesn't work either – Pedro Neri Oct 21 '19 at 14:40
1

No, just opening directly on the browser. Is the BrowserRouter supposed to work only over a http server ?? Because I need the build to work as a static html as the HashRouter do – Pedro Neri Oct 21 '19 at 14:43
You can use memoryrouter – Oleg Oct 21 '19 at 14:44
Thanks for the tip. So the problem is that the BrowserRouter needs to be served over a http web server ? – Pedro Neri Oct 21 '19 at 14:47
Yes I think and more useful in your use case will be memoryrouter, also look at https://stackoverflow.com/questions/55670845/how-to-use-react-router-browserrouter-in-a-static-index-html-file – Oleg Oct 21 '19 at 14:49

Why is BrowserRouter rendering a blank screen?

1 Answers1