为什么当我在 Apache 上运行我的 react 构建时……只出现空白页……？答案

【问题标题】：Why is that when i run my react build on Apache...Just blank page appears..?为什么当我在 Apache 上运行我的 react 构建时……只出现空白页……？
【发布时间】：2019-02-21 10:54:06
【问题描述】：

应用程序在节点服务器中运行良好，但我在 Apache 服务器中得到空白页面，即使我使用了绝对路径。

这里是 index.html 代码

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <link rel="manifest" href="/manifest.json">
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <title>React App</title>
  <link href="./static/css/main.0778317d.css" rel="stylesheet">
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <script type="text/javascript" src="./static/js/main.1b4d826e.js"></script>
</body>

这是屏幕截图..

【问题讨论】：

标签： javascript reactjs apache

【解决方案1】：

如果网站托管在http://namweb.com/NamFdr
在以下配置中添加文件夹名称“NamFdr”：

|+> 在 package.json 中添加

"homepage": "/NamFdr",

|+> 在 index.js 中添加路由器 basename 配置

ReactDOM.render(
    <BrowserRouter basename='/blocal'>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
)

[或] 在 app.js 中添加 Router basename 配置

import { BrowserRouter, Route, Switch } from 'react-router-dom';

-------------------------

<BrowserRouter basename="/NamFdr/">
    <Switch>
        <Route exact path="/" component={App} />


    </Switch>
</BrowserRouter>

【讨论】：

【解决方案2】：

即使尝试了@Abdul Moiz 提到的步骤，我也无法使用 React Router v4 让我的应用程序在 Apache 主机上运行。

我找到了这个答案：https://stackoverflow.com/a/50657757/7867822

基本上将<BrowserRouter/> 更改为<HashRouter/> 对我有用。

【讨论】：

【解决方案3】：

我正在使用 react 路由器 4。所以当我使用 Router 时，它会产生问题并且不能使用绝对路径。而不是 Router 使用 BrowserRouter 并将 basename 用于我复制项目构建的文件夹商店。

从 'react-router-dom' 导入 { BrowserRouter, Route, Switch };

<BrowserRouter history={history} basename="/shop/">
      <div>
        <Switch>
          <Route exact path="/" component={App} />
          <Route path="/cart" component={Cart} />
          <PublicRoute path="/login" component={LoginPage} />
          <PrivateRoute path="/dashboard" component={DashBoardPage} />
          <PrivateRoute path="/checkout" component={checkOut} />
          <PrivateRoute path="/favourite" component={favourite} />
          <PrivateRoute
            path="/payment_Information"
            component={PaymentInformation}
          />
          <Route path="/product_details/:pid" component={ProductDeatils} />
          <Route path="*" compononent="NotFound" />
        </Switch>
      </div>
    </BrowserRouter>

并在 package.json 文件 "homepage": "/shop" 中创建路径。

【讨论】：