Question

在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主页设置为“ ./”和“。”来构建但它会继续建立空白页面

Answer 1

使用以下命令配置package.json：

"homepage": "."

并重建

为什么BrowserRouter呈现空白屏幕？

1 个答案: