Express.js Sunucusu Tarafı Oluşturma - İstek '/ json/sürüm/

Reaksiyon uygulamamı oluşturmak için hızlı çalışan bir sunucum var. HomeContainer ile / taban yolunu eşleştiren ve diğer tüm yollarla eşleşmeyen bir yol dosyası var. Ben sayfa bulunamadı rota çabucak HomeContainer yoluna değiştirmeden önce işlenen alır sunucuda uygulamayı çalıştırdığınızdaExpress.js Sunucusu Tarafı Oluşturma - İstek '/ json/sürüm/

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;

yaşıyorum sorundur.

Ekspres sunucumun /json/version için / isteği göndermeden önce bu işlemin gerçekleştiğini belirledim, bu rota rotalarımda biriyle eşleşmiyor ve bu nedenle sayfa bulunamadı bileşeni işleniyor .

Şimdi ne alamadım bu isteği yapan ve nasıl page not found bileşeni durdurmak için ev konteyner önce işlenen ediliyor nedeni budur. Düğüm sunucusunda hata ayıklamayı denedim ve başvurulan bu yolun atıfta bulunabileceği en eski yer, _http_server.js

adlı bir dosya içinde bir yayma çağrısında bulunduğunu bulabilir. Aşağıda, hata ayıklayıcısının ekran görüntüsü ve başvurulan URL'yi bulduğum yer verilmiştir.

Ayrıca başvuru için, aşağıda benim ekspres sunucu ekledik.

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

Bu durumun neden olduğunu ve sorunumu nasıl çözebileceğimi bilen var mı?

DÜZENLEME: Aşağıda, sorunu gösteren bir video - sorunlarına neden şeyin emin https://d26dzxoao6i3hh.cloudfront.net/items/2z3y3f1x3N1D2e422W42/Screen%20Recording%202017-10-23%20at%2012.24%20pm.mov

kaynak

2017-10-23 woolm110

güncellenir tepki-yönlendirici kullanıyorsanız, ne sürümüdür? – jthawme

@jthawme Ben ve onun sürümü 4 – woolm110

Ben JavaScript olmadan çalıştırırsanız ne olur? Bence, sunucunuz 'Sayfa bulunamadı' döndürüyor, ancak JS in başladığı anda doğru verileri yükler ve DOM'ı yeniden oluşturur. RouteComponentPromises'ta bir sorununuz olduğunu varsayardım. –

Değil% 100 ama tamir ettim. Ben yapılan

iki büyük değişiklikler

Sayı 2 gerçekten önemli görünüyor gzip eklentisinde false indexFromEmptyFile ayarlanması bir çiftleşmiş motoru

olarak Ejs Kullanılması

vardı, onsuz express, index.ejs yerine index.html hizmet vermeye çalışıyordu ve bu, yukarıdaki index.html ile aynı sorunlara yol haritamdaki bir yolla eşleşmiyordu. Aşağıda

sizi varsayarsak kodu ilgi Out

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

kaynak

2017-10-23 21:48:03 woolm110

Express.js Sunucusu Tarafı Oluşturma - İstek '/ json/sürüm/

cevap

İlgili konular