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

Question

I have a react app that works great on localhost. after deploying, I upload the build folder content and the app crashes. this is the crush screenshot https://www.screencast.com/t/hjkoBmaY9 just a white screen. I have searched a lot and found that it is caused by the react-router-dom

this is my App.js component:

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;

if I remove the BrowserRouter block and run the build again, I see the app,

this is how I see an output

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

export default App;

What can be the reason to that?

here is the git repo of the project. https://github.com/davsev/calc

any help would be amazing.

Answer 1

I experienced the same problem.

Quick Troubleshoot -

1. Make sure that the components in your Route definitions do not have a duplicate of the Switch Route definition or any for that matter.
2. Keep all your Route definition in the App js file
3. Wrap the with the BrowserRouter in the index.js file. Take it out of the App.js