我是React的初学者，被一些问题卡住了，我使用服务器渲染，并使用express作为服务器，得到一个错误信息--TypeError.ReactDom.default.createElement不是函数。_reactDom.default.createElement不是一个函数。我检查了各个网站的解决方案，但没有找到任何解决方案。
索引.js
import React from 'react';
import ReactDOM from 'react-dom';
import Route from 'react-router-dom';
import {StaticRouter as Router} from 'react-router-dom';
import App from './components/App';
ReactDOM.hydrate(
<Router><App /></Router> ,
document.getElementById('mountNode'),
);
App.js
import React, { useState } from 'react';
import {Route,Switch,browserHistory} from "react-router-dom";
import { BrowserRouter as Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import HomePage from './HomePage';
import About from './About';
export default function App()
{
const history = createMemoryHistory();
return (
<Router history={browserHistory}>
<Switch>
<Route path="/" exact component={HomePage}/>
<Route path="/about" component={About}/>
</Switch>
</Router>
);
}
错误信息
TypeError: _reactDom.default.createElement is not a function
at HomePage (C:\LMS-APP\src\components\/HomePage.js:10:17)
at processChild (C:\LMS-APP\node_modules\react-dom\cjs\react-dom-server.node.development.js:3043:14)
at resolve (C:\LMS-APP\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5)
at ReactDOMServerRenderer.render (C:\LMS-APP\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22)
at ReactDOMServerRenderer.read (C:\LMS-APP\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)
at Object.renderToString (C:\LMS-APP\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27)
at C:\LMS-APP\src\server\/server.js:10:40
at Layer.handle [as handle_request] (C:\LMS-APP\node_modules\express\lib\router\layer.js:95:5)
at next (C:\LMS-APP\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (C:\LMS-APP\node_modules\express\lib\router\route.js:112:3)
软件包.json
{
"name": "LMS-APP",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev-server": "nodemon --exec babel-node src/server/server.js --ignore dist/",
"dev-bundle": "webpack -w -d"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.9.6",
"@babel/node": "^7.8.7",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"babel-loader": "^8.1.0",
"express": "^4.17.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
},
"devDependencies": {
"babel-eslint": "^10.1.0",
"eslint": "^7.0.0",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^4.0.2",
"nodemon": "^2.0.4"
}
}
主页.js
import React from 'react-dom';
import {Link} from 'react-router-dom';
export default function HomePage()
{
return(
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
</div>
);
}
服务器.js
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from '../components/App';
const server = express();
server.use(express.static('dist'));
server.get('/', (req, res) => {
const initialMarkup = ReactDOMServer.renderToString(<App />);
res.send(`
<html>
<head>
<title>Sample React App</title>
</head>
<body>
<div id="mountNode">${initialMarkup}</div>
<script src="/main.js"></script>
</body>
</html>
`)
});
server.listen(4242, () => console.log('Server is running...'));
从 react-router-domజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజ ssr文件 说明 StaticRouter 在服务器上使用，而 BrowserRouter 在客户端中使用。
在您的例子中，文件 index.js 是在客户端中运行的，所以我的建议是把这个文件中的Router标签去掉。