反应服务器端渲染指向错误的 bundle.js答案

【问题标题】：React serverside rendering pointing to wrong bundle.js反应服务器端渲染指向错误的 bundle.js
【发布时间】：2018-07-03 23:32:25
【问题描述】：

我有一个 react 服务器端渲染应用程序以及 node & express js。

Routes.js

import React from 'react';
import { Route } from 'react-router-dom';
import Home from './Home';
import Test from './Test';

export default () => {
    return (
        <div>
            <Route exact path="/" component={Home} />
            <Route exact path="/test/:deviceId" component={Test} />
        </div>

    );
};

index.js

import express from 'express';
import renderer from './helpers/renderer';


const app = express();

app.use(express.static('public')));
app.get('*', (req, res) => {
    console.log(req.url);
    res.send(renderer(req));
});

app.listen(3090, () => {
    console.log('listening at http://localhost:3090');
})

renderer.js

import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import Routes from '../components/Routes';

export default req => {
  const content = renderToString(
    <StaticRouter location={req.path} context={{}}>
      <Routes />
    </StaticRouter>
  );

  return `
    <!DOCTYPE html>
    <html>
      <head>
      </head>
      <body>
        <div id="app">${content}</div>
        <script src="bundle.js"></script>
      </body>
    </html>
  `;
};

client.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import Routes from './Routes';

ReactDOM.hydrate(
    <BrowserRouter>
        <Routes />
    </BrowserRouter>
    , document.getElementById('app'));

好吧，我正在尝试将 deviceId 与我的路由 /test/:deviceId 一起传递，我在 renderer.js 下的 HTML 模板在 /test/build.js 而不是 /bundle.js 下寻找 bundle.js 文件

如何确保我的捆绑文件始终指向正确的位置，该位置位于由

公开的 public 文件夹下

app.use(express.static('public'));

如果我访问 / 路由到 Home 组件，它会在公共文件夹的正确文件夹下查找 bundle.js。

如果您需要任何额外信息，请告诉我。

【问题讨论】：

标签： javascript reactjs express server-side-rendering

【解决方案1】：

好吧，我终于弄清楚是什么改变了 bundle.js 的路径。

如果我的路由是'/'，它将在http://localhost:3090/bundle.js 处查找bundle.js

如果路由是'/test/:deviceId'，它将在http://localhost:3090/test/:deviceId/bundle.js 寻找bundle.js（在这种情况下它永远找不到bundle.js）

我修改了 renderer.js 下的 html 模板，修复了它

对于标签，我将 bundle.js 的路径从 'bundle.js' 更改为 '/bundle.js'

import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import Routes from '../components/Routes';

export default req => {
  const content = renderToString(
    <StaticRouter location={req.path} context={{}}>
      <Routes />
    </StaticRouter>
  );

  return `
    <!DOCTYPE html>
    <html>
      <head>
      </head>
      <body>
        <div id="app">${content}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `;
};

现在，它会一直在http://localhost:3090/bundle.js下寻找bundle.js

【讨论】：