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

我遇到了同样的问题。

快速疑难解答-

请确保您的路由定义中的组件没有“交换路由”定义或与此相关的任何内容。
将所有路线定义保留在App js文件中
用index.js文件中的BrowserRouter来包装。从App.js中取出

使用react-router时React应用崩溃

1 个答案: