使用 react-router 时 React 应用程序崩溃

Question

我有一个在本地主机上运行良好的 React 应用程序。 部署后，我上传了构建文件夹内容，应用程序崩溃了。 这是美眉截图https://www.screencast.com/t/hjkoBmaY9只是一个白屏。 查了很多，发现是react-router-dom引起的

这是我的App.js组件：

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Calc from './components/Calc';
import Login from './components/auth/Login';
import MechinaSetup from './components/adminarea/MechinaSetup';
import './App.css';
class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Route exact path="/" component={Calc}  />
        <Route path="/login" component={Login} />
        <Route path="/mechinasetup" component={MechinaSetup} />
      </BrowserRouter>
    );
  }
}

export default App;

如果我删除BrowserRouter块并再次运行构建，我会看到应用程序，

这就是我看到输出的方式

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Calc from './components/Calc';
import Login from './components/auth/Login';
import MechinaSetup from './components/adminarea/MechinaSetup';
import './App.css';
class App extends Component {
  render() {
    return (
      // <BrowserRouter>
      //   <Route exact path="/" component={Calc}  />
      //   <Route path="/login" component={Login} />
      //   <Route path="/mechinasetup" component={MechinaSetup} />
      // </BrowserRouter>
      <Calc />
    );
  }
}

导出默认应用程序；

那可能是什么原因？

这是该项目的 git repo。 https://github.com/davsev/calc

任何帮助都会很棒。

Answer 1

我遇到了同样的问题。

快速故障排除 -

1. 确保您的路由定义中的组件没有 Switch Route 定义的副本或任何与此相关的副本。
2. 将所有路由定义保存在 App js 文件中
3. 在 index.js 文件中使用 BrowserRouter 包装 。 从 App.js 中取出