Question

当我在我的server.js文件中尝试renderToString时，它说：

不变违规：无法在“连接（显示）”的上下文或道具中找到“存储”。将根组件包装在a中，或者将“store”显式传递为“Connect（Show）”的支柱。

我正在尝试使用react-helmet运行我的应用程序。

server.js

require('babel-core/register');

const renderToString = require('react-dom/server').renderToString;
var express          = require('express');
const path           = require('path');
const RouterContext  = require('react-router').RouterContext;
const match          = require('react-router').match;
const Router         = require('react-router').Router;
const React          = require('react');
const ReactDOM       = require('react-dom');
const Helmet         = require('react-helmet');
const routes         = require('./src/routes');


console.log('1');
const port = process.env.PORT || 8080 ;
var app = express();

app.set('port', process.env.PORT || 8080);
app.use(express.static(__dirname));


app.get('*', (req, res) => {
    match({routes: routes.default, location: req.url}, (err, redirectLocation, renderProps)=> {
        console.log('2');
        console.log(err);
        if (err) {
            return res.status(500).send(err.message);
        }
        if (redirectLocation) {
            return res.redirect(302, redirectLocation.pathname + redirectLocation.search);
        }
        console.log('3');
        let markup;
        let rendered = renderToString(React.createElement(RouterContext , renderProps));
        console.log('4');
        let head = Helmet.rewind();
        if (renderProps) {
            markup = `
            <!DOCTYPE html>
            <html>
              <head>
                <meta charset="utf-8"/>
                ${head.title}
                ${head.meta}
                ${head.link}
              </head>
              <body>
                <div id="app">
                ${rendered}
                </div>
                <script src="bundle.js"></script/>
              </body>
            </html>`
        }
        console.log('5');
        res.write(markup);
        res.end();
        console.log('6');

    });

});

app.listen(port);
console.log('Server started!');

routes.js

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './components/app';
import Show from './components/show';


const routes = (
    <Route path="/" component={App}>
        <Route path="/:id" component={Show}/>
    </Route>
);

export default routes;

的src / index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, browserHistory } from 'react-router';
import reducers from './reducers';
import routes from './routes';
import promise from 'redux-promise';

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <Router history={browserHistory} routes={routes} />
  </Provider>
  , document.querySelector('.container'));

Answer 1

您需要在服务器上创建商店并呈现<Provider>。请查看此tutorial以供参考。

renderToString找不到商店

1 个答案: