已部署的 Build Reactjs 项目显示白屏

Question

我有一个 react 项目，它在本地服务器中运行良好，但是当我尝试将其上传到生产服务器时，它显示白屏/空白屏幕，而控制台中没有任何错误。

我所做的是运行“npm run build”，然后将在构建项目上编译的文件上传到我的生产实例上。我还修改了package.json，把"homepage":"http://50.31.112.112/new_vehicle_management"

我做错了什么？

这是路线的代码

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import {Login} from './components/Login';
import {Menu} from './components/Menu';
import {NewProcess} from './components/NewProcess';
import {ContinueProcess} from './components/ContinueProcess';
import {SearchProcess} from './components/SearchProcess';
import {CreateProcess} from './components/CreateProcess';
import {ProcessActivity} from './components/ProcessActivity';
import {ProcessContinueActivity} from 
'./components/ProcessContinueActivity';
import {ProceedProcess} from './components/ProceedProcess';

function App() {
  return (
    <div className="App">
      <Router>
        <Route path="/login" component={Login}/>
        <Route path="/menu" component={Menu}/>
        <Route path="/newprocess" component={NewProcess}/>
        <Route path="/continueprocess" component={ContinueProcess}/>
        <Route path="/searchprocess" component={SearchProcess}/>
        <Route path="/createprocess" component={CreateProcess}/>
        <Route path="/processactivity" component={ProcessActivity}/>
        <Route path="/processcontinueactivity" component= 
         {ProcessContinueActivity}/>
        <Route path="/proceedprocess" component={ProceedProcess}/>
       </Router>
     </div>
   );
 }



export default App;

Answer 1

您可能需要将basename="/new_vehicle_management" 添加到您的路由器。

<Router basename="/new_vehicle_management" />

当您在 localhost 中运行时，您的路由位于服务器根目录中（即：localhost/login），但由于您在更深层次托管网站，您需要指定基本名称，否则路径名将永远不会匹配任何路由。

另外不要忘记在路径/中设置一些东西，否则你的网站在用户访问时不会呈现任何内容。

<Route path="/" component={YourLandingPageComponent}/>

编辑：basename 在 react-router v4 中有效，否则您可能需要在每个路由中设置 basename。

更多详情请见https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string。