个人中心
gpt4 book ai didi

node.js - React-router服务器端错误

转载 作者：太空宇宙 更新时间：2023-11-03 23:07:03 25 4
gpt4 key购买 nike

我正在尝试使我的客户端 Web 应用程序同构。我得到这个作为模式:Client Routing (using react-router) and Server-Side Routing

这是我所拥有的。

服务器.js:

var React = require('react'),
express = require('express'),
Router = require('react-router'),
routes = require('./src/js/main'),
path = require('path'),
app = express(),
port = 5555,
bodyParser = require('body-parser');

// Make sure to include the JSX transpiler
require("node-jsx").install();

// Include static assets. Not advised for production
app.use(express.static(path.join(__dirname, 'dist')));
// Set view path
app.set('views', path.join(__dirname, 'views'));
// set up ejs for templating. You can use whatever
app.set('view engine', 'ejs');


// ...express config...

app.use(function(req, res, next) {
  var router = Router.create({location: req.url, routes: routes})
  router.run(function(Handler, state) {
    var reactHtml = React.renderToString(<Handler/>)
    return res.render('index.ejs', {reactOutput: reactHtml})
  })
})

app.listen(port);
console.log('Server is Up and Running at Port : ' + port);

main.js:

var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var Link = Router.Link;
var APPLICATION_ID = '',
    SECRET_KEY = '',
    VERSION = 'v1'; //default application version;
Backendless.initApp(APPLICATION_ID, SECRET_KEY, VERSION);



// wrapper
APP = require('./components/app').APP;

// pages
var Frontpage = require('./components/frontpage/app-frontpage'); // homepage
var NewEstate = require('./components/new-estate/app-newestate');
var NewEstateDetails = require('./components/new-estate/app-newestatedetails');
var Contacts = require('./components/static/app-contacts');
var About = require('./components/static/app-about');

var SecondEstate = require('./components/second-estate/app-secondestate');
var SecondEstateDetails = require('./components/second-estate/app-secondestatedetails');
var CommerceEstate = require('./components/commerce-estate/app-commerceestate');
var CommerceEstateDetails = require('./components/commerce-estate/app-commerceestatedetails');



var routes = (
  <Route handler={APP}>
    <Route handler={Frontpage}/>
    <Route name="NewEstate" ignoreScrollBehavior={true} handler={NewEstate}/>
    <Route name="NewEstateDetails" ignoreScrollBehavior={true} path="/NewEstate/:itemId" params={{routeType: "NewEstateDetails" }} handler={NewEstateDetails}/>
    <Route name="SecondEstate" ignoreScrollBehavior={true} handler={SecondEstate}/>
    <Route name="SecondEstateDetails" ignoreScrollBehavior={true} path="/SecondEstate/:itemId" params={{routeType: "SecondEstateDetails" }} handler={NewEstateDetails}/>
    <Route name="CommerceEstate" ignoreScrollBehavior={true} handler={CommerceEstate}/>
    <Route name="CommerceEstateDetails" ignoreScrollBehavior={true} path="/CommerceEstate/:itemId" params={{routeType: "CommerceEstateDetails" }} handler={NewEstateDetails}/>
    <Route name="Contacts" handler={Contacts}/>
    <Route name="About" handler={About}/>    
  </Route>
);

Router.run(routes, function (Handler) {
  React.render(<Handler/>, document.getElementById('main'));
});

和index.ejs:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Балкит - Агентство недвижимости</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body >
<div id="main"><%- reactOutput %><div class=""></div></div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA7F9cOuVNV6_RRAdLowrz9elBbRuXFy2Y&libraries=drawing"></script>
<script src="js/scripts.js"></script>
<script src="js/main.js"></script>
</script>
</body>
</html>

我尝试运行 server.js 并收到此错误:

//web/react-balkit/server.js:28
    var reactHtml = React.renderToString(<Handler/>)
                                         ^
SyntaxError: Unexpected token <
    at Module._compile (module.js:439:25)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:935:3

我已经尝试修复它，但我离模式越来越远，并且出现了更多错误。

最佳答案

require("node-jsx").install(); 行正在插入将任何 JSX 转换为普通 JS 的中间件。

但是，在包含该文件之前，您需要一个具有 JSX 语法的文件。与所有中间件一样，顺序很重要。

要修复，请以相反的方式插入它们:

require("node-jsx").install();
路线 = require('./src/js/main')

编辑:添加服务器

您可以创建一个工厂以便使用标准 JS。

app.use(function(req, res, next) {
  var router = Router.create({location: req.url, routes: routes})
  router.run(function(Handler, state) {
    var Element = React.createFactory(Handler);
    var reactHtml = React.renderToString(Element());
      return res.render('index.ejs', {reactOutput: reactHtml})
  });
});

关于node.js - React-router服务器端错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31580842/

25 4 0
文章推荐： c# - Xamarin Master Detail 句柄泛型
文章推荐： CSS 按钮 - 仅在文本上链接，而不在按钮上链接
文章推荐： c# - 使用 C# 泛型的助手
文章推荐： css - 有没有办法获得默认的 css 设置或重置它？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com