静态服务器的React build出现404错误

Question

我有一个React应用程序，它在本地运行得很好，但是当我尝试在静态Node服务器serve (npm serve)上使用

serve -s build

服务器返回一个404 The requested path could not be found页面。我的理解是，这个问题与我在应用程序中使用BrowserRouter的事实有关。我使用以下代码在根目录中放置了一个.htaccess文件，但它没有解决问题。

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

下面是我在Node环境中看到的一个建议，但我不知道将代码放在哪里。

app.get('*', function (req, res) {
  res.send('index_path')
})

我的index.js文件如下。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Route, Switch, BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import Service from './javascript/Service';
import { PageNotFound } from './PageNotFound';
import * as serviceWorker from './serviceWorker';

const routing = (
    <Router>
        <Switch>
            <Route exact path="/" component={App} />
            <Route path="/Service/:serviceName" component={Service} />
            <Route component={PageNotFound} />
        </Switch>
    </Router>    
);

ReactDOM.render(routing, document.getElementById('root'));

serviceWorker.unregister();

Answer 1

首先，您应该使用

npm run build (or yarn)

下一步安装serve

npm install -g serve

然后运行这段代码

serve -s build