एक्सप्रेस.जेएस सर्वर साइड रेंडरिंग - अनुरोध '/ जेसन/संस्करण/

मेरे पास एक प्रतिक्रिया सर्वर है जो मेरे प्रतिक्रिया अनुप्रयोग को पूर्व-प्रस्तुत करने के लिए चल रहा है। मेरे पास एक रूट फ़ाइल है जो होमकॉन्टेनर से बेस रूट / पर मेल खाती है और अन्य सभी मार्ग पृष्ठ से मेल नहीं खाते हैं।एक्सप्रेस.जेएस सर्वर साइड रेंडरिंग - अनुरोध '/ जेसन/संस्करण/

import HomeContainer from 'containers/home-container/home-container'; 
import PageNotFound from 'components/page-not-found/page-not-found'; 

const routes = [ 
    { 
    path: '/', 
    exact: true, 
    component: HomeContainer 
    }, 
    { 
    path: '*', 
    component: PageNotFound 
    } 
]; 

export default routes;

समस्या मैं आ रही है जब मैं सर्वर पृष्ठ नहीं मिला मार्ग जल्दी HomeContainer मार्ग को बदलने से पहले गाया जाता है पर एप्लिकेशन को चलाने के लिए है।

मैंने पहचाना है कि ऐसा इसलिए हो रहा है क्योंकि मेरा एक्सप्रेस सर्वर /json/version से अनुरोध कर रहा है इससे पहले कि यह / पर अनुरोध करे, यह मार्ग मेरी रूट फ़ाइल में से किसी एक से मेल नहीं खाता है और इसलिए पृष्ठ नहीं मिला है ।

अब मुझे यह नहीं मिला कि यह अनुरोध क्यों कर रहा है और page not found घटक को घर के कंटेनर से पहले प्रस्तुत किया जा रहा है। मैं नोड सर्वर डिबगिंग की कोशिश की है और जल्द से जल्द जगह मैं इस मार्ग पा सकते हैं संदर्भित किया जा रहा एक फेंकना कॉल में शामिल है के अंदर एक फ़ाइल बुलाया _http_server.js

नीचे डिबगर का एक स्क्रीनशॉट है और मैं जहां पाया यूआरएल संदर्भित किया जा रहा।

भी संदर्भ के लिए, मैं अपने एक्सप्रेस सर्वर नीचे दिये है।

import express from 'express'; 
import React from 'react'; 
import { renderToString } from 'react-dom/server'; 
import { Provider } from 'react-redux'; 
import { StaticRouter, matchPath } from 'react-router-dom'; 
import serialize from 'serialize-javascript'; 
import expressStaticGzip from 'express-static-gzip'; 
import sourceMapSupport from 'source-map-support'; 

import routes from 'routes'; 
import configureStore from 'store'; 
import AppContainer from 'containers/app-container/app-container'; 

if (process.env.NODE_ENV === 'development') { 
    sourceMapSupport.install(); 
} 

const app = express(); 

app.use(expressStaticGzip('./static/assets')); 

app.get('*', (req, res, next) => { 
    const store = configureStore(); 

    /** 
    * Load initial data into state 
    * match requested URL path to the component in routes 
    * check for 'fireInitialActions' method (found in the container components) 
    * and dispatch if it exists 
    */ 
    const routeComponentPromises = routes.reduce((accumulator, route) => { 
    if (matchPath(req.url, route) && route.component && route.component.fireInitialActions) { 
     accumulator.push(Promise.resolve(store.dispatch(route.component.fireInitialActions()))); 
    } 

    return accumulator; 
    }, []); 

    Promise.all(routeComponentPromises) 
    .then(() => { 
     const context = {}; 
     const markup = renderToString(
     <Provider store={store}> 
      <StaticRouter location={req.url} context={context}> 
      <AppContainer /> 
      </StaticRouter> 
     </Provider> 
    ); 

     const initialData = store.getState(); 
     res.send(` 
     <!DOCTYPE html> 
     <html> 
      <head> 
      <title>Test</title> 
      <script src='vendor.js' defer></script> 
      <script src='app.js' defer></script> 
      <script>window.__initialData__ = ${serialize(initialData)}</script> 
      </head> 
      <body> 
      <div id="root">${markup}</div> 
      </body> 
     </html> 
     `); 
    }) 
    .catch(next); 
}); 

app.listen(process.env.PORT || 3000,() => { 
    console.log('Server is listening'); 
});

क्या कोई जानता है कि यह क्यों हो रहा है और मैं अपनी समस्या का समाधान कैसे कर सकता हूं?

संपादित करें: यहाँ एक वीडियो मुद्दा दिखा है - https://d26dzxoao6i3hh.cloudfront.net/items/2z3y3f1x3N1D2e422W42/Screen%20Recording%202017-10-23%20at%2012.24%20pm.mov

स्रोत

2017-10-23 woolm110

ब्याज से बाहर है, तो आप यह मानते हुए प्रतिक्रिया रूटर का उपयोग कर रहे हैं, कौन-सा संस्करण है? – jthawme

@jthawme मैं हूं और इसका संस्करण 4 – woolm110

क्या होता है यदि आप जावास्क्रिप्ट के बिना इसे चलाते हैं? मुझे लगता है कि क्या होता है कि आपका सर्वर 'पृष्ठ नहीं मिला' देता है, लेकिन जैसे ही जेएस इसमें शामिल होता है, उचित डेटा लोड करता है और डीओएम का पुनर्निर्माण करता है। मुझे लगता है कि आपको रूट कॉम्पोनेंट क्रोमिस में कोई समस्या है। –

नहीं 100% क्या मुद्दों पैदा कर रहा था के बारे में सुनिश्चित लेकिन अब मैं इसे ठीक कर लिया है।

दो प्रमुख परिवर्तन मैंने बनाया

एक templating इंजन
gzip प्लगइन में गलत पर indexFromEmptyFile स्थापना के रूप में EJS का उपयोग

संख्या 2 वास्तव में महत्वपूर्ण प्रतीत हो रहा है, तो वह बिना एक्सप्रेस index.ejs की बजाय index.html की सेवा करने की कोशिश कर रहा था और यह index.html के ऊपर जैसा ही समस्याएं उत्पन्न कर रहा था, मेरी मार्ग फ़ाइल में किसी रूट से मेल नहीं खाता था।

नीचे कोड अद्यतन

import express from 'express'; 
import React from 'react'; 
import { renderToString } from 'react-dom/server'; 
import { Provider } from 'react-redux'; 
import { StaticRouter, matchPath } from 'react-router-dom'; 
import serialize from 'serialize-javascript'; 
import sourceMapSupport from 'source-map-support'; 
import expressStaticGzip from 'express-static-gzip'; 

import routes from 'routes'; 
import configureStore from 'store'; 
import AppContainer from 'containers/app-container/app-container'; 

if (process.env.NODE_ENV === 'development') { 
    sourceMapSupport.install(); 
} 

const app = express(); 

app.set('views', './static/'); 
app.set('view engine', 'ejs'); 
app.use(expressStaticGzip('static/assets', { indexFromEmptyFile: false })); 

app.get('*', (req, res, next) => { 
    const store = configureStore(); 

    /** 
    * Load initial data into state 
    * match requested URL path to the component in routes 
    * check for 'fireInitialActions' method (found in the container components) 
    * and dispatch if it exists 
    * return as promises so we can chain 
    */ 
    const routeComponentPromises = routes.reduce((accumulator, route) => { 
    if (matchPath(req.url, route) && route.component && route.component.fireInitialActions) { 
     accumulator.push(Promise.resolve(store.dispatch(route.component.fireInitialActions()))); 
    } 

    return accumulator; 
    }, []); 

    Promise.all(routeComponentPromises) 
    .then(() => { 
     const context = {}; 
     const markup = renderToString(
     <Provider store={store}> 
      <StaticRouter location={req.url} context={context}> 
      <AppContainer /> 
      </StaticRouter> 
     </Provider> 
    ); 

     const initialData = serialize(store.getState()); 

     res.render('index.ejs', {initialData, markup}); 
    }) 
    .catch(next); 
}); 

app.listen(process.env.PORT || 3000,() => { 
    console.log('Server is listening'); 
});`

स्रोत

2017-10-23 21:48:03 woolm110

एक्सप्रेस.जेएस सर्वर साइड रेंडरिंग - अनुरोध '/ जेसन/संस्करण/

उत्तर

संबंधित मुद्दे