为什么 BrowserRouter 渲染一个空白屏幕？答案

【问题标题】：Why is BrowserRouter rendering a blank screen?为什么 BrowserRouter 渲染一个空白屏幕？
【发布时间】：2020-02-17 16:15:30
【问题描述】：

在我的 ReactJS 项目上运行 yarn build 后，我遇到了 BrowserRouter 路由问题。在开发期间 (yarn start) 一切正常，但在构建之后，index.html 只显示一个空白页面。 Chrome 控制台没有显示错误，并且网络能够获取所有 .js 和 .css 文件。

我的 App.js 文件如下所示：

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

当我将 App.js 路由器从 BrowserRouter 更改为 HashRouter 时，如下所示：

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

构建后正常工作，所以我认为是BrowserRouter的问题。我还尝试将 BrowserRouter 的基本名称添加到此：

<Router basename={""}>

还有这个：

<Router basename={"/"}>

但它们都不能解决问题。我做错了什么？

编辑：

添加更多信息：

我尝试将 package.json 主页设置为“./”和“.”进行构建但它一直在构建空白页面

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

将 package.json 配置为：

"homepage": "."

重建

【讨论】：

我试过了，还是不行。仍然呈现空白页面。还尝试使用主页将基本名称更改为“”和“/”：“。”它也不起作用
不，直接在浏览器上打开。 BrowserRouter 是否应该仅在 http 服务器上工作？因为我需要构建像 HashRouter 那样作为静态 html 工作
你可以使用memoryrouter
github.com/ReactTraining/react-router/blob/master/packages/…
感谢您的提示。所以问题是 BrowserRouter 需要通过 http web 服务器提供服务？