为什么我在 Apache 上运行 React 构建时只会出现空白页面？

Question

为什么我在 Apache 上运行 React 构建时只会出现空白页面？

3

在Node服务器中，应用程序运行良好，但是在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>

以下是屏幕截图：

- Abdul Moiz

3个回答

2

尽管尝试了@Abdul Moiz提到的步骤，但我仍然无法在Apache托管上使用React Router v4运行我的应用程序。

我找到了这个答案：https://dev59.com/TloU5IYBdhLWcg3wV2C8#50657757

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

- Anurag Srivastava

0

如果网站托管在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>

- Sujay U N

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Abdul Moiz · Accepted Answer

我正在使用 react router 4。当我使用 Router 时，它会出现问题，并且无法使用绝对路径。因此，可以使用 BrowserRouter ，并使用 basename 来指定项目构建的目录，例如“shop”。下面是相关代码：

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

<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" 以创建路径。