时间戳

首页 > 解决方案 > 反应服务器端渲染指向错误的 bundle.js

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

问题描述

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

路由.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');
})

渲染器.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>
  `;
};

客户端.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 文件

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

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

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

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

标签： javascriptreactjsexpressserver-side-rendering

解决方案

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

如果我的路线是'/'，它将在以下位置查找 bundle.jshttp://localhost:3090/bundle.js

如果路由是'/test/:deviceId'，它会寻找 bundle.js http://localhost:3090/test/:deviceId/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>
  `;
};

现在，它总是会在下寻找 bundle.jshttp://localhost:3090/bundle.js

推荐阅读