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

Question

I have a react server-side rendering application along with node & express js. 我有一个React Server端渲染应用程序以及node＆express js。

Routes.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 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 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 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'));

Well, I am trying to pass a deviceId along with my route /test/:deviceId, and my HTML template under renderer.js looks for bundle.js file under /test/build.js instead of /bundle.js 好吧，我正在尝试将deviceId与路由/ test /：deviceId一起传递，并且renderer.js下的HTML模板在/test/build.js下而不是/bundle.js下寻找bundle.js文件。

How do I make sure my bundle file always points to the correct location which is under public folder exposed by 如何确保我的包文件总是指向正确的位置，这是公开的公共文件夹下

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

if I visit, / route to Home component, it looks for bundle.js under correct folder which is the public folder. 如果我访问/路由到Home组件，它将在正确的文件夹（即公用文件夹）下查找bundle.js。

Do let me know if you need any extra information. 如果需要任何其他信息，请告诉我。

Answer 1

Well, finally I have figured out what was changing the path of bundle.js with each out. 好了，终于我弄清楚了每次更改bundle.js的路径的原因。

if my route is '/' , it will look for bundle.js at http://localhost:3090/bundle.js 如果我的路线是'/' ，它将在http://localhost:3090/bundle.js

if the route is '/test/:deviceId' , it will look for bundle.js at http://localhost:3090/test/:deviceId/bundle.js (in this scenario it will never find bundle.js) 如果路由是'/test/:deviceId' ，它将在http://localhost:3090/test/:deviceId/bundle.js中查找bundle.js（在这种情况下，它将永远找不到bundle.js）。

I fixed it my modifying the html temlate under renderer.js 我修复了我在renderer.js下修改html temlate的问题

for the tag I changed path to bundle.js from 'bundle.js' to '/bundle.js' 对于标记，我将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>
  `;
};

Now, it will always look for bundle.js under http://localhost:3090/bundle.js 现在，它将始终在http://localhost:3090/bundle.js

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

问题描述

1 个解决方案

解决方案1
0 2018-07-04 13:22:30

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

问题描述

1 个解决方案

解决方案1 0 2018-07-04 13:22:30

解决方案1
0 2018-07-04 13:22:30