renderToString找不到店

雖然我嘗試renderToString我server.js文件，它說：renderToString找不到店

不變違規：無論是在上下文或連接的」道具找不到「存儲」（顯示）」。將根組件包裝在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

你需要創建一個商店在服務器上呈現<Provider>。看看這個tutorial作爲參考。

來源

2016-11-26 19:33:32

renderToString找不到店

回答

相關問題