Question

我正在使用带有bundle-loader的反应路由器v4将我的代码拆分为块并使我的组件异步。此外，我正在使用express for server端，现在尝试使用StaticRouter反应路由器来预渲染我的反应应用程序。

这是我的路线。

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Bundle from 'shared/Bundle';
import LightApp from 'bundle-loader?lazy&name=lightApp!./LightApp';
import FinancialApp from 'bundle-loader?lazy&name=financialApp!./FinancialApp/index';

const bundler = (module) => (
    () => (
        <Bundle load={ module }>
            {
                (Comp) => Comp ? <Comp /> : <div>Loading</div>
            }
        </Bundle>
    )
);

const Routes = () => (
    <Switch>
        <Route exact path='/' component={ bundler(LightApp) } />
        <Route path='/(market|symbol)' component={ bundler(FinancialApp) } />
    </Switch>
);

export default Routes;

Bundle组件来自路由器官方网站。

这是我的服务器端脚本。

import express from 'express';
import { renderToString } from 'react-dom/server';
import configureStore from './src/store';
import { Provider } from 'react-redux';
import InitialState from './src/reducers/initialState';
import StaticRouter from 'react-router-dom/StaticRouter';
import App from './src/components/App';
import config from './config';

let app = express();
let env = process.env.NODE_ENV || 'development';

app.disable('x-powered-by');

app.locals.ENV = env;
app.locals.ENV_DEVELOPMENT = env == 'development';

app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');

app.use(logger('dev'));


app.use(express.static(__dirname + '/dist', { maxAge: 86400000 * 7, lastModified: true }));

// handle app requests and server side rendering;
app.get('*', (req, res, next) => {
    let  markup = ReactDOMServer.renderToString(
        <StaticRouter location={req.url} context={}>
            <App />
        </StaticRouter>
    );

    res.render('index.ejs', {
        markup,
        state: {},
        assets: {
            bundle: assets['bundle'],
            vendor: assets['vendor'],
            styles: assets['styles']
        }
    });
})

app.use(function (req, res, next) {
    res.status(404);
});

app.use(function (err, req, res, next) {
    res.status(err.status || 500);

    if (err) {
        console.log(err);
    }

    res.json({
        message: app.locals.ENV_DEVELOPMENT ? err.message : 'Intrenal Server Error',
        error: err,
        title: 'error'
    });
});

app.listen(config.port, function () {
    console.log(`Finstead server listening on port ${ config.port }`);
});

但是对于带有target: 'node'的webpack，我得到的分割代码文件应该只有一个server.js文件，而不是0.server.js 1.server.js，因为我不需要代码分割在服务器端。

另外在我的开发环境中，我在服务器端使用babel-watch我收到此错误

Error: Cannot find module 'bundle-loader?lazy&name=lightApp!./LightApp'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (D:\Projects\finstead\client\src\components\Routes.jsx:4:1)
    at Module._compile (module.js:571:32)
    at babelWatchLoader (D:\Projects\finstead\client\node_modules\babel-watch\runner.js:50:13)
    at Object.require.extensions.(anonymous function) [as .jsx] (D:\Projects\finstead\client\node_modules\babel-watch\runner.js:61:7)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)

如何使用反应路由器v4进行延迟加载和服务器端渲染？提前谢谢！

React Router v4延迟加载服务器端渲染

0 个答案: