ReferenceError: Object.l.createBrowserHistory没有定义文档
(D:\wamp\www\branches\react_ht_server\SSR_TESTING\ssr_running_bkup\node_modules\history\umd\history.development.js:5:207) at BrowserRouter (D:\wamp\www\branches\react_ht_server\SSR_TESTING\ssr_running_bkup\node_modules\react-router-dom\umd\react-router-dom.development.js:83:36) at processChild (D：\wamp\www)未定义文档branches\react_ht_server\SSR_TESTING\ssr_running_bkup\node_modules\react-dom\cjs\react-dom-server.node.development.js:3353:14) at resolve (D:\wamp\www\branches\react_ht_server\SSR_TESTING\ssr_running_bkup\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5) at ReactDOMServerRenderer.render (D:\wamp\www\branches\react_ht_server\SSR_ )TESTING\ssr_running_bkup\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22) at ReactDOMServerRenderer.read (D:\wamp\www\branches\react_ht_server\SSR_TESTING\ssr_running_bkup\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29) at Object.renderToString (D:\wamp\www\branches\react_ht_server\SSR_TESTING\ssr_running_bkup\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27) at eval (webpack:/./server/index.js？：16:184)在Layer.handle 请求 at next (D:\wamp\www\branches\react_ht_server\SSR_TESTING\ssr_running_bkup\node_modules\express\lib\router\route.js:137:13)
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.hydrate(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);App.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link} from "react-router-dom";
import Home from './Home';
import About from './About';
export default () => {
return (
<Router>
<nav>
<Link to="/"> Home </Link>
<Link to="/about"> About </Link>
<Link to="/product"> Product </Link>
</nav>
<Routes>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Routes>
</Router>
);
};webpack.server.js
const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
entry: './server/index.js',
target: 'node',
externals: [nodeExternals()],
output: {
path: path.resolve('server-build'),
filename: 'index.js'
},
mode: 'development',
module: {
rules: [
{
test: /\.js|jsx$/,
use: 'babel-loader',
exclude: /(node_modules|bower_components)/,
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.link\.css$/i,
use: [
{ loader: "style-loader", options: { injectType: "linkTag" } },
{ loader: "file-loader" },
],
},
]
}
};package.json
{
"name": "httpdocs",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.15.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"express": "^4.17.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"request": "^2.88.2",
"web-vitals": "^1.1.2"
},
"scripts": {
"dev:build-server": "NODE_ENV=development webpack --config webpack.server.js --mode=development -w",
"dev:start": "nodemon ./server-build/index.js",
"dev": "npm-run-all --parallel build dev:*",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"@babel/preset-react": "^7.16.0",
"nodemon": "^2.0.15",
"npm-run-all": "^4.1.5",
"webpack-cli": "^3.3.12",
"webpack-node-externals": "^1.7.2"
}
}回答 2
Stack Overflow用户
发布于 2022-02-03 02:58:11
我不知道你的特快路线是什么样子，所以我不确定这是否对你有帮助。但我的问题是使用嵌套的路由器组件。显然，StaticRouter也是一个路由器，尽管有关于react路由器-dom嵌套它们的文档示例。
因此，假设您有一个类似于以下内容的快速SSR路径：
server.get('/*', (req, res) => {
const app = ReactDOMServer.renderToString(
<StaticRouter location={req.url}>
<App />
</StaticRouter>
);
const indexFile = path.resolve('./build/index.html');
fs.readFile(indexFile, 'utf8', (err, data) => {
if (err) {
console.error('Something went wrong:', err);
return res.status(500).send('Oops, better luck next time!');
}
return res.send(data.replace('<div id="root"></div>', `<div id="root">${app}</div>`));
});
});您需要确保正在呈现的应用程序也不包含BrowserRouter或路由器组件。下面是我的主要根应用程序组件作为一个示例。我已经注释掉了导致我得到这个错误的那些行。
function App(props) {
return (
/*<Router>*/
<div className='App'>
<GlobalHeader />
<Container>
<Row>
<Col md={12}>
<div className='wrapper'>
<Routes>
<Route exact path='/' element={<Landing />} />
{/* <Route path='/download' component={Download} />
<Route path='/account/create' component={SignUp} />
<Route path='/skillcalc/:skill' component={SkillCalculator} /> */}
</Routes>
</div>
</Col>
</Row>
</Container>
</div>
/*</Router>*/
);
}Stack Overflow用户
发布于 2022-06-20 17:36:31
您还没有粘贴服务器端代码，但我想您已经在服务器上导入了App.js，以便您可以创建和返回HTML。如果是这样的话，它将无法工作，因为您正在服务器端呈现BrowserRouter。
关于react路由器文档，要解决此问题，请从App.js中删除BrowserRouter导入和使用，并将其放在index.js中
ReactDOM.hydrate(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter/>
</React.StrictMode>,
document.getElementById("root")
);然后，在服务器端代码中添加文档中提到的StaticRouter。
https://stackoverflow.com/questions/70232786
复制相似问题
腾讯云开发者
