React Server Rendering не выводит страницу индекса - PullRequest
Новая
       33

React Server Rendering не выводит страницу индекса

0 голосов
/ 25 января 2019

Я играл с Server Side Rendering (SSR) с React, и у меня почти все получилось, за исключением того, что домашняя страница не загружается с сервера.

Если я использую альтернативные маршруты, например / test или / 404, он загружается с сервера. Если я иду по пути / index, он просто загружает мое приложение реакции, но не html с сервера. Я проверил это, отключив JavaScript, и заметил, что это происходит.

Вот код моего сервера, который я использую: 

import path from 'path';
import fs from 'fs';
import React from 'react';
import express from 'express';
import cors from 'cors';
import configureStore from '../src/redux/store/configureStore';
import { Provider } from 'react-redux';
import { StaticRouter } from 'react-router-dom';
import { renderToString } from 'react-dom/server';
import Client from '../src/client/index.jsx';

/* Express settings */
const app  = express();
const PORT = process.env.PORT || 3334;
app.disable('x-powered-by');
app.use(cors());
app.use(express.static('./dist'));
app.use(handleRender);

/* Handle React Application */
function handleRender(req, res) {
    const context   = {}; 
    const store     = configureStore({});
    const indexFile = path.resolve('./dist/index.html');
    const html      = renderToString(
        <Provider store={store}>
            <StaticRouter location={req.url} context={context}>
                <Client />
            </StaticRouter>
        </Provider>
    );
    fs.readFile(indexFile, 'utf8', (err, data) => {
        if (err) {
            console.error('Something went wrong:', err);
        }        
        res.status(context.status||200).send( 
            data.replace(
                '<div id="root"></div>',
                `
                <div id="root">${html}</div>
                <script>                
                    window.__PRELOADED_STATE__ = ${JSON.stringify(store)}
                </script>
                `
            )
        );
    });    
}

/* Listen for connections */
app.listen(PORT, () => {
    console.log(`? ? Server is running on port ${PORT}`);
});

Вот мой основной компонент реакции с маршрутами: 

import React from 'react';
import { 
    Switch, 
    Route
} from 'react-router-dom';
import App from './components/App/index.jsx';
import NotFound from './NotFound.jsx';

const Test = () => (
    <h1>Test!</h1>
);

const Bruh = () => (
    <h1>Bruh!</h1>
);

const Client = () => (
    <Switch>
        <Route path="/" exact component={App} />
        <Route path="/test" exact component={Test} />
        <Route path="/bruh" exact component={Bruh} />
        <Route component={NotFound} />
    </Switch>
);

export default Client;

Наконец, вот мой файл index.js для моего приложения реагирования: 

import React from 'react';
import { hydrate } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import configureStore from './redux/store/configureStore';
import Client from './client/index.jsx';
import './styles/index.css';

/* Redux */
const preloadedState = window.__PRELOADED_STATE__ = {}; //initial state
delete window.__PRELOADED_STATE__;
const store         = configureStore(preloadedState);
const unsubscribe   = store.subscribe( () => {
    console.log("Store: ", store.getState());
});

/* Render / Hydrate App */
hydrate(
    <Provider store={ store }>
        <BrowserRouter>
            <Client />
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);

Я думаю, это все. Дайте мне знать, если вам нужно больше информации. Буду признателен за любые советы и помощь.

Спасибо!

...