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) 在 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) 在 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) 解析时 (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) 在 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) 在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) 在 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) 在评估(webpack:///./server/index.js?:16:184) 在 Layer.handle [作为handle_request] (D:\wamp\www\branches\react_ht_server\SSR_TESTING\ssr_running_bkup\node_modules\express\lib\router\layer.js:95:5) 接下来 (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"
}
}
最佳答案
我不确定您的快速路由是什么样的,所以我不确定这是否会对您有帮助。但我的问题是使用嵌套的 Router 组件。尽管有关于react-router-dom嵌套它们的文档示例,但StaticRouter显然也算作路由器。
因此,假设您有一条与此类似的快速 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 或 Router 组件。这是我的主要根应用程序组件作为示例。我已经注释掉了导致我出现此错误的行。
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>*/
);
}
关于reactjs - 引用错误 : document is not defined at Object. l.createBrowserHistory,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70232786/