私は、ReactでSSRに関する情報を見つけました。だから、私の場合(React/graphQL/Apollo/Express/Webpackのweb-app)にもっと役立つ例を見つけましたが、私は1つの問題を抱えていました。いくつかの例を下に:ルートをインポートする際のサーバー側レンダリングの問題
我々はルータをインポートするところからserver.js
...
import {router} from './client/App';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { match, RoutingContext, Route } from 'react-router';
...
function renderApp(props, res) {
const markup = renderToString(<RoutingContext {...props}/>);
const html = createPage(markup);
write(html, 'text/html', res);
}
app.get('*', (req, res, next) => {
const location = hist.createLocation(req.path);
match({routes: router, location: location}, (err, redirectLocation, renderProps) => {
if (err) {
writeError('ERROR!', res);
next(err);
} else if (redirectLocation) {
redirect(redirectLocation, res);
} else if (renderProps) {
renderApp(renderProps, res);
} else {
writeNotFound(res);
}
});
});
...
とApp.js
:
...
import Login from './components/Login';
import Register from './components/Register';
...
let routes = (
<Route>
<Route path="login" component={Login}/>
<Route path="register" component={Register}/>
...
</Route>
);
export let router = [{
path: '/',
component: Layout,
indexRoute: {
component: View
},
getChildRoutes(location, cb) {
require.ensure([],() => cb(null, routes));
}
}];
match({router, location},() => {
render(
<ApolloProvider client={client}>
<div>
<Router routes={router} onUpdate={() => window.scrollTo(0, 0)} history={browserHistory}/>
</div>
</ApolloProvider>,
document.getElementById('root')
);
});
私はこのexampleのように全力を尽くす試みたが、server.js
に、私はインポートしようとすると問題があるrouter
App.js
サーバは動作せず、Reactコンポーネント(スタイルのインポートなど、私たちがクライアント上でできることはすべてサーバー上ではできないものすべて)に関連するエラーを表示します。
質問は何ですか、間違っていますか?この問題を起こさずにルートをインポートするにはどうすればよいですか? 私はすでにこの小さな仕事に多くの時間を腰掛けているのは本当に面倒です。
ご協力いただき、ありがとうございます。ありがとうございます!
感謝を! –