Question

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

我所做的是运行'npm run build'，然后将在生产实例上在build项目上编译的文件上载。我还修改了package.json并放置了“主页”：“ 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}/>

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

有关更多详细信息，请参见https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string。

部署的Build Reactjs项目显示白屏

1 个答案: