我是React的初学者,遇到了一些问题。我正在使用服务器渲染并使用express作为服务器,收到一条错误消息:错误:不变量失败:浏览器历史记录需要DOM。我已经检查了来自不同站点的fro解决方案,并应用了它们的解决方案,但在应用不同的解决方案时会出现不同的错误。如前所述,我收到一个错误:TypeError:无法读取未定义的属性'location',为此,我通过从'react Router dom'导入-import{BrowserRouter As Router}将路由器更改为BrowserRouter,之后我收到以下错误。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Route from 'react-router-dom';
import App from './components/App';
ReactDOM.hydrate(
<Router><App /></Router> ,
document.getElementById('mountNode'),
);
一个pp.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>
);
}
错误
Error: Invariant failed: Browser history needs a DOM
at invariant (C:\LMS-APP\node_modules\tiny-invariant\dist\tiny-invariant.cjs.js:13:11)
at Object.createHistory [as createBrowserHistory] (C:\LMS-APP\node_modules\history\cjs\history.js:273:16)
at new BrowserRouter (C:\LMS-APP\node_modules\react-router-dom\modules\BrowserRouter.js:11:13)
at processChild (C:\LMS-APP\node_modules\react-dom\cjs\react-dom-server.node.development.js:2995: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)
package.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"
}
}
由于您将express.js用作服务器,我相信您还需要配置server.js代码。正如底部的错误日志所示,调用的第一个文件是,位于C:\LMS-APP\src\server\/server.js:10:40
。
在本网站https://reacttraining.com/react-router/web/guides/server-rendering 这里有一个“将所有内容放在一起”部分,您也可以在服务器端代码中遵循并实现正确的代码。由于您使用的是express.js,请记住根据server.js上的代码进行调整。
还要注意网站上的代码示例。就像这个街区:
const html = ReactDOMServer.renderToString(
<StaticRouter location={req.url} context={context}>
<App />
</StaticRouter>
);
上面的代码片段将放在server.js文件中。
<代码>
server.get("*", (req, res) => {
// Render the component to a string.
const html = ReactDOMServer.renderToString(
<StaticRouter location={req.url} context={context}>
<App />
</StaticRouter>
);
const finalDocument =`<html>
<head>
<title>Your App Title</title>
</head>
<body>
<div id="root">${html}</div>
</body>
</html>
`;
res.send(finalDocument);
}
});
这是服务器.get()函数的示例代码。服务器变量保存express应用程序。
如果错误仍然发生,您应该将server.get()函数中的第一个参数从server.get("/",......)
更改为server.get("*",......)
...
*星号表示通配符,这意味着对服务器或默认URL的任何访问都将由服务器端处理,GEThttp://localhost:
问题内容: 我正在从本教程中学习,但始终收到此错误: “ react-router”不包含名为“ browserHistory”的导出。 具有react-router的文件是这样的: 问题答案: 您现在需要从历史记录模块中获取。 请注意,他们最近更改了模块API,因此,如果您使用的是最新版本,则导入会稍有变化:
在我的react js应用程序中,我想实现服务器端渲染。因此,我遵循了这个repo。 现在我遇到了这个错误。 不变冲突:浏览器历史记录需要DOM 我以为这是错误。但是我已经导入了router并使用了函数。但我也犯了同样的错误。 app.js(客户端根文件) js(路由文件) js(服务器端文件) 我不知道实际的问题是什么。我搜索了很多google.checked这个qsalso.but没有结果。我
I my app.js我已将路线定义为: 在我的中,我有一个链接: 但问题是,当我在aboue path中设置prop'确切={true}时,找不到这个路径 当我没有在上面的路径中设置exact={true}时,在同一页面上呈现路径组件及其下方的路径组件
我已经使用Vue CLI创建了一个Vue3应用程序,用Vuex和路由器创建我的应用程序。应用程序运行良好。 注意:我遵循了这个有用的文档,用于Vue3的Vuexhttps://blog.logrocket.com/using-vuex-4-with-vue-3/ 要求现在我想更改我的Vue3应用程序,使其具有服务器端渲染支持(即SSR)。 我观看了关于使用Vue3创建SSR应用程序的精彩视频:ht
我有一个小小的React应用程序项目,我已经在Github中部署了它。它的工作原理,甚至我使用导入{浏览器路由器,链接,交换机,路由}从"react-router-dom";路由和作品...这是我的代码:类应用程序扩展反应。组件{ render(){ } }导出默认应用程序;' 我在本地机器上使用过这个,没有“basename”,并且工作过。现在,在github服务器中,我的问题是,当您访问我的应
我是一个新的反应和反应。我已经花了几个小时了,我只是走到了死胡同。 我正在使用CreateReact应用程序和用于css的bulma。我的依赖项: }, 我查看了stackoverflow的所有相关问题,创建了react应用程序文档,并在他们的回购协议中搜索了他们的开放问题部分,谷歌搜索了所有可能的关键字。我不知所措。 我的路由器只会呈现一个路由(Homeroute)。 如何让它显示/创建路线?