Реагировать на серверный рендеринг, указывая на неправильный bundle.js - PullRequest
Новая
       21

Реагировать на серверный рендеринг, указывая на неправильный bundle.js

0 голосов
/ 04 июля 2018

У меня есть приложение для рендеринга на стороне сервера вместе с 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'));

Что ж, я пытаюсь передать идентификатор устройства вместе с моим маршрутом / тестом /: идентификатор устройства, и мой HTML-шаблон в renderer.js ищет файл bundle.js в /test/build.js вместо /bundle.js

Как убедиться, что мой пакетный файл всегда указывает на правильное местоположение, которое находится в папке public , доступной для 

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

если я захожу, компонент / route to Home, он ищет bundle.js в правильной папке, которая является общей папкой.

Дайте мне знать, если вам нужна дополнительная информация.

1 Ответ

0 голосов
/ 04 июля 2018

Ну, наконец, я выяснил, что меняло путь bundle.js с каждым выходом.

если мой маршрут '/', он будет искать bundle.js в http://localhost:3090/bundle.js

если маршрут '/test/:deviceId', он будет искать bundle.js в http://localhost:3090/test/:deviceId/bundle.js (в этом сценарии он никогда не найдет bundle.js)

Я исправил это, изменив шаблон HTML под renderer.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>
  `;
};

Теперь он всегда будет искать bundle.js в http://localhost:3090/bundle.js

...