使用 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 中取出