react-router v4 使用快速服务器路由（静态）

Question

我使用 create-react-app 创建了一个 React 应用程序，并向其中添加了 react-router v4。

如果我运行应用yarn start一切正常。

如果我通过快速服务器（静态，无 SSR）提供应用程序，我无法导航到 'complex' 路由，例如 http://localhost:3000/xxxxxx/12345。

这是使用 react-router 配置的路由：

 <ApolloProvider client={apolloClient}>
        <Provider store={store}>
          <ConnectedRouter history={history}>
            <LocaleProvider locale={enUS}>
              <Switch>


                <Route path="/xxxxxx/:id" component={MyCOmponent} />
                <Route component={NotFound} />


              </Switch>
            </LocaleProvider>
          </ConnectedRouter>
        </Provider>
      </ApolloProvider>

这是快递服务器代码：

// tslint:disable:no-console
// tslint:disable:no-any

import * as express from 'express';
import * as path from 'path';

const port = process.env.PORT || 3000;

var app: express.Application = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function (req: any, res: any) {
  console.log(req.originalUrl);

  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const server = app.listen(port, () => {
  console.log(`  App is running at http://localhost:${port} in ${app.get('env')} mode`);
  console.log('  Press CTRL-C to stop\n');
});

export default server;

我注意到网络日志中请求的 javascript 包（在 chrome 中）有错误的 url: xxxxx/static/js/bundle-hash.js 以及 req.originalUrl 在控制台日志中。

/xxxxx/static/css/main.144af4c5.css
/xxxxx/static/js/main.65b09e30.js
/xxxxx/favicon.ico

为什么javascript/css文件的前缀是xxxxxx（应该是 static/js/bundle-hash.js 不是 xxxxx/static/js/bundle-hash.js)?

Answer 1

好吧，那与 react-router 或 express 完全无关。我假设是因为 express 或 nginx 在部署时给了我错误。

对于 create-react-app 模板，有一个 PUBLIC_URL 环境变量必须在生产中设置。

react-router v4 使用快速服务器路由（静态）

react-router v4 routes with express server (static)

node.js

express

reactjs

react-router

create-react-app