Javascript 使用ejs作为视图引擎时，服务器端呈现出现React和error_Javascript_Reactjs_Express_React Router_Ejs

Javascript 使用ejs作为视图引擎时，服务器端呈现出现React和error

javascript reactjs express

Javascript 使用ejs作为视图引擎时，服务器端呈现出现React和error,javascript,reactjs,express,react-router,ejs,Javascript,Reactjs,Express,React Router,Ejs,所以起初，我创建的应用程序没有任何视图引擎。我的服务器如下所示： var app = express(); const apiProxy = httpProxy.createProxyServer({ target:'http://localhost:3001' }); app.use('/api', function(req,res){ apiProxy.web(req,res); }) app.use(logger('dev')); app.use(express.stati

所以

起初，我创建的应用程序没有任何视图引擎。我的服务器如下所示：

var app = express();

const apiProxy = httpProxy.createProxyServer({
  target:'http://localhost:3001'
});

app.use('/api', function(req,res){
  apiProxy.web(req,res);
})

app.use(logger('dev'));
app.use(express.static(path.join(__dirname, 'public')));

app.get('*', function(req,res){
  //res.sendFile(path.resolve(__dirname, 'public', 'index.html'))
  const clientString = toHtml(req.url);
  res.send(clientString);
});


app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});


app.use(function(err, req, res, next) {
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

var app = express();

const apiProxy = httpProxy.createProxyServer({
  target:'http://localhost:3001'
});

app.use('/api', function(req,res){
  apiProxy.web(req,res);
})

app.use(logger('dev'));
app.use(express.static(path.join(__dirname, 'public')));

app.set('view engine', 'ejs');
app.use(function(req, res, next) {
  requestHandler(req,res,next);
  }
);


app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});


app.use(function(err, req, res, next) {
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

我的toHtml函数如下所示（当然是在编译之前）：

请求处理程序：

function requestHandler(req, res, next) {
  axios.get('http://localhost:3001/books').then(function(response) {
    const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);
    const store = createStoreWithMiddleware(reducers, {
      "books": {
        "books": response.data
      }
    })
    const initialState = JSON.stringify(store.getState()).replace(/<\/script/g, '<\\/script').replace(/<!--/g, '<\\\!--');
    const context = {};

    const reactComponent = renderToString(
      <Provider store={store}>
        <StaticRouter location={req.url} context={context}>
          {routes}
        </StaticRouter>
      </Provider>
    );

    if (context.url) {
      redirect(context.status, context.url)
    } else {
      res.status(200).render('index', {reactComponent, initialState})
    }

  })
  .catch(function(err){
        console.log('#Initial Server-side rendering error', err);
      })
};

export default requestHandler;

函数requestHandler（req、res、next）{
axios.get（）http://localhost:3001/books，然后（函数（响应）{
const createStoreWithMiddleware=applyMiddleware（thunkMiddleware）（createStore）；
const store=createStoreWithMiddleware（减缩器、{
“书籍”：{
“书籍”：响应。数据
}
})
const initialState=JSON.stringify（store.getState（））.replace(/
function requestHandler(req, res, next) {
  axios.get('http://localhost:3001/books').then(function(response) {
    const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);
    const store = createStoreWithMiddleware(reducers, {
      "books": {
        "books": response.data
      }
    })
    const initialState = JSON.stringify(store.getState()).replace(/<\/script/g, '<\\/script').replace(/<!--/g, '<\\\!--');
    const context = {};

    const reactComponent = renderToString(
      <Provider store={store}>
        <StaticRouter location={req.url} context={context}>
          {routes}
        </StaticRouter>
      </Provider>
    );

    if (context.url) {
      redirect(context.status, context.url)
    } else {
      res.status(200).render('index', {reactComponent, initialState})
    }

  })
  .catch(function(err){
        console.log('#Initial Server-side rendering error', err);
      })
};

export default requestHandler;

<!DOCTYPE html>
<HTML>
  <HEAD>
    <TITLE>html from the server</TITLE>
    <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0" />

    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css" rel="stylesheet" integrity="sha384-S7YMK1xjUjSpEnF4P8hPUcgjXYLZKK3fQW1j5ObLSl787II9p8RO9XUGehRmKsxd" crossorigin="anonymous">
    <link rel="stylesheet" href="./bundle.css" type="text/css"  />
  </HEAD>
  <BODY>
    <DIV id="app"><%-reactComponent-%></DIV>
    <script>window.__INITIAL_STATE__=<%- initialState -%></script>
    <SCRIPT src="./bundle.js"></SCRIPT>
  </BODY>
</HTML>