Как использовать суперстатик с React?

Question

Я хочу использовать 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 ».

Что я хочу:

Я ожидаю получить контент, который находится на / некоторый URL , но вместо этого я получаю "Cannot GET / some_url ".

Кто-нибудь знает, как это исправить?

Answer 1

После небольшого исследования я обнаружил, что сверхстатический не даже имеет код для pushState.

Они упоминают pushState только в файле README.md и в качестве ключевого слова в файле package.json.

Как видите:

РЕШЕНИЕ

Вместо этого используйте spa-http-server .

Answer 2

Это проблема с вашим .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>