renderToString не смог найти магазин

В то время как я пытаюсь renderToString в моем файле server.js, он говорит:renderToString не смог найти магазин

Инвариантных Нарушения: Не удался найти «магазин» в любом контексте или реквизите «Connect (Показать) ». Либо оберните корневой компонент в a, либо явно передайте «store» в качестве опоры для «Connect (Show)».

Я пытаюсь запустить приложение с реактивным шлемом.

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'));

источник

2016-11-26 user1666543

благодарит за вашу помощь @qxz. – user1666543

Вы должны создать хранить nd визуализировать <Provider> на сервере. Посмотрите на это tutorial для справки.

источник

2016-11-26 19:33:32

renderToString не смог найти магазин

ответ

Смежные вопросы