Java Universal Reactjs与Nashorn和Tomcat_Java_Reactjs_Tomcat_Nashorn

Java Universal Reactjs与Nashorn和Tomcat

java reactjs tomcat

Java Universal Reactjs与Nashorn和Tomcat,java,reactjs,tomcat,nashorn,Java,Reactjs,Tomcat,Nashorn,对于我当前的项目，我正在尝试创建一个通用的reactjs网站。我当前的服务器架构限制我只使用Tomcat应用服务器。安装nodejs服务器不是一个选项作为一个POC，我使用一个示例存储库（），其中包含在服务器上呈现的react with react路由器。运行此示例时，我遇到以下错误： org.springframework.scripting.support.StandardScriptEvalException: TypeError: 0 ,> u.createServerRende

对于我当前的项目，我正在尝试创建一个通用的reactjs网站。我当前的服务器架构限制我只使用Tomcat应用服务器。安装nodejs服务器不是一个选项

作为一个POC，我使用一个示例存储库（），其中包含在服务器上呈现的react with react路由器。运行此示例时，我遇到以下错误：

org.springframework.scripting.support.StandardScriptEvalException: TypeError: 0 ,> u.createServerRenderContext is not a function in <eval> at line number 1

org.springframework.scripting.support.StandardScriptEvalException:TypeError:0，>u.createServerRenderContext不是第1行的函数

设置react路由器上下文时，server.js文件中会发生此错误。有没有人有过在Tomcat容器中使用SSR的大型react应用程序的经验？或者还有其他解决方案吗

提前谢谢

我遇到了同样的问题

我不熟悉node，但如果您查看node_modules文件夹以及，就不会提到ServerRouter类，比如client.js文件中调用的类

可能createcreateServerRenderContext函数也不存在。至少不在本模块中

试着用静态路由器代替它

编辑：

通过安装最新版本的ReactRouter 4 beta版使其正常工作

npm install --save react-router-dom@next
npm install --save react-router@next

然后更改server.js文件：

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import {StaticRouter} from 'react-router';
import {createStore, applyMiddleware} from 'redux';
import thunkMiddleware from 'redux-thunk';
import {Provider} from 'react-redux';
import serialize from 'serialize-javascript';
import reducer from './reducers';
import App from 'components/App';

window.render = (template, model) => {
      const context = {};
      const req = JSON.parse(model.get('req'));
      const initialState = JSON.parse(model.get('initialState'));

      const store = createStore(reducer, initialState, applyMiddleware(thunkMiddleware));

      const markup = ReactDOMServer.renderToString(
        <Provider store={store}>
          <StaticRouter location={req.location} context={context}>
            <App/>
          </StaticRouter>
        </Provider>
      );

      return template
        .replace('SERVER_RENDERED_HTML', markup)
        .replace('SERVER_RENDERED_STATE', serialize(initialState, {isJSON:true}));
};

从“React”导入React；
从“react dom/server”导入ReactDOMServer；
从“react router”导入{StaticRouter}；
从“redux”导入{createStore，applyMiddleware}；
从“redux thunk”导入thunk中间件；
从'react redux'导入{Provider}；
从“序列化javascript”导入序列化；
从“./reducers”导入减速机；
从“组件/应用程序”导入应用程序；
window.render=（模板、模型）=>{
const context={}；
const req=JSON.parse（model.get（'req'））；
const initialState=JSON.parse（model.get（'initialState'）；
const store=createStore（reducer、initialState、applyMiddleware（thunk中间件））；
const markup=ReactDOMServer.renderToString(
);
返回模板
.replace（'SERVER\u RENDERED\u HTML'，标记）
.replace（'SERVER_RENDERED_STATE'，serialize（initialState，{isJSON:true}））；
};

client.js包含以下内容：

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import {createStore, applyMiddleware} from 'redux';
import thunkMiddleware from 'redux-thunk';
import {Provider} from 'react-redux';
import reducer from './reducers';
import App from 'components/App';

const store = createStore(reducer, window.__PRELOADED_STATE__, applyMiddleware(thunkMiddleware));

const markup = (
  <Provider store={store}>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </Provider>
);

ReactDOM.render(markup, document.getElementById('app'));

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter}；
从“redux”导入{createStore，applyMiddleware}；
从“redux thunk”导入thunk中间件；
从'react redux'导入{Provider}；
从“./reducers”导入减速机；
从“组件/应用程序”导入应用程序；
const store=createStore（减速器、窗口、预加载状态、applyMiddleware（thunkMiddleware））；
常量标记=(
);
render（markup，document.getElementById（'app'）；

最后是App.js

import React from 'react';
import {Route, Link} from 'react-router-dom';
import Home from 'components/Home';
import Child from 'components/Child';
import 'styles/main.css';

export default function App() {
  return (
    <div>
      <h1>Hello Server Side Rendering!!</h1>

      <ul>
        <li><Link to="/">{'Home'}</Link></li>
        <li><Link to="/child">{'Child'}</Link></li>
      </ul>

      <Route exactly path="/" component={Home}/>
      <Route path="/child" component={Child}/>

    </div>
  );
}

从“React”导入React；
从'react router dom'导入{Route，Link}；
从“组件/主页”导入主页；
从“组件/子级”导入子级；
导入'styles/main.css'；
导出默认函数App（）{
返回(
你好，服务器端渲染！！

{'Home'}
{'Child'}

);
}

我删除了未命中对象，因为此版本的react router中不存在该对象。我遇到了相同的问题