我正在使用react路由器v4和 bundle-loader
将我的代码拆分为块并使我的组件异步 . 此外,我正在使用快递服务器端,现在尝试使用反应路由器 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组件来自react路由器官方站点 .
这是我的服务器端脚本 .
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进行延迟加载和服务器端渲染?提前致谢!