如何在 React 中使用超静态？答案

【问题标题】：How to use superstatic with React?如何在 React 中使用超静态？
【发布时间】：2019-07-02 14:40:23
【问题描述】：

我想使用 superstatic 和 React 来托管我的构建文件。

运行npm run host 后，我的文件被构建并启动了超静态。

参见下面的代码。

package.json - './application/dist' 是我的构建文件

"scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "npm run lint && webpack --mode production",
    "host": "npm run build && superstatic ./application/dist --port 3000",
    "test": "jest",
    "lint": "eslint . --ext .js,.ts,.tsx",
    "lint:fix": "npm run lint -- --fix"
  },
"devDependencies": {...},
"dependencies": {
    "@material-ui/core": "^4.0.1",
    "connected-react-router": "^6.4.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.1",
    "react-redux": "^7.0.3",
    "react-router-dom": "^5.0.0",
    "redux": "^4.0.1",
    "redux-saga": "^1.0.2",
    "superstatic": "^6.0.4"
  }

superstatic.json

{
  "rewrites": [
    {
      "source": "*",
      "destination": "/index.html"
    }
  ]
}

我得到了什么：

当我打开 localhost:3000 时，我可以看到我的应用程序，但是当我刷新浏览器时，我得到“Cannot GET /some_url”。

我想要什么：

我希望获得 /some url 上的内容，但我得到的是“Cannot GET /some_url”。

有谁知道如何解决这个问题？

【问题讨论】：

标签： reactjs webpack react-router

【解决方案1】：

这是您的 .htaccess（或 nginx.conf ）的问题。

试试：

<ifModule mod_rewrite.c>


  #######################################################################
  # GENERAL                                                             #
  #######################################################################

  # Make apache follow sym links to files
  Options +FollowSymLinks
  # If somebody opens a folder, hide all files from the resulting folder list
  IndexIgnore */*


  #######################################################################
  # REWRITING                                                           #
  #######################################################################

  # Enable rewriting
  RewriteEngine On

  # If its not HTTPS
  RewriteCond %{HTTPS} off

  # Comment out the RewriteCond above, and uncomment the RewriteCond below if you're using a load balancer (e.g. CloudFlare) for SSL
  # RewriteCond %{HTTP:X-Forwarded-Proto} !https

  # Redirect to the same URL with https://, ignoring all further rules if this one is in effect
  RewriteRule ^(.*) https://%{HTTP_HOST}/$1 [R,L]

  # If we get to here, it means we are on https://

  # If the file with the specified name in the browser doesn't exist
  RewriteCond %{REQUEST_FILENAME} !-f

  # and the directory with the specified name in the browser doesn't exist
  RewriteCond %{REQUEST_FILENAME} !-d

  # and we are not opening the root already (otherwise we get a redirect loop)
  RewriteCond %{REQUEST_FILENAME} !\/$

  # Rewrite all requests to the root
  RewriteRule ^(.*) /

</ifModule>

<IfModule mod_headers.c>
  # Do not cache sw.js, required for offline-first updates.
  <FilesMatch "sw\.js$">
    Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
    Header set Pragma "no-cache"
  </FilesMatch>

【讨论】：

【解决方案2】：

经过一番研究，我发现superstatic没有甚至有pushState的代码。

他们仅在 README.md 和 package.json 文件中作为关键字提及 pushState。

如你所见：

解决方案

请改用spa-http-server。

【讨论】：