Javascript 我不断地得到;不变量失败:浏览器历史记录需要DOM“;错误
我正在使用React路由器。当我尝试通过localhost进入我的界面时:3000/登录;我得到了这个错误。“不变量失败:浏览器历史记录需要DOM”。我到处搜索,但找不到任何解决办法。我正在分享我的代码,有人可以帮忙吗 我的server.js文件Javascript 我不断地得到;不变量失败:浏览器历史记录需要DOM“;错误,javascript,reactjs,Javascript,Reactjs,我正在使用React路由器。当我尝试通过localhost进入我的界面时:3000/登录;我得到了这个错误。“不变量失败:浏览器历史记录需要DOM”。我到处搜索,但找不到任何解决办法。我正在分享我的代码,有人可以帮忙吗 我的server.js文件 import React from 'react'; import { StaticRouter } from 'react-router-dom'; import express from 'express'; import { renderToSt
import React from 'react';
import { StaticRouter } from 'react-router-dom';
import express from 'express';
import { renderToString } from 'react-dom/server';
import { Provider } from 'react-redux';
import serialize from 'serialize-javascript';
import App from '$/containers/app';
import setupStore from '$/state/store';
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
const server = express();
server
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
.get('/*', (req, res) => {
// Compile an initial state
const preloadedState = { counter: 0 };
// Create a new Redux store instance
const store = setupStore(preloadedState);
const context = {};
// Render the component to a string
const markup = renderToString(
<Provider store={store}>
<StaticRouter context={context} location={req.url}>
<App />
</StaticRouter>
</Provider>,
);
// Grab the initial state from our Redux store
const finalState = store.getState();
if (context.url) {
res.redirect(context.url);
} else {
res.status(200).send(
`<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${
assets.client.css
? `<link rel="stylesheet" href="${assets.client.css}">`
: ''
}
${
process.env.NODE_ENV === 'production'
? `<script src="${assets.client.js}" defer></script>`
: `<script src="${assets.client.js}" defer crossorigin></script>`
}
</head>
<body>
<div id="root">${markup}</div>
<script>
window.__PRELOADED_STATE__ = ${serialize(finalState)}
</script>
</body>
</html>`,
);
}
});
export default server;
从“React”导入React;
从“react router dom”导入{StaticRouter};
从“快递”进口快递;
从'react dom/server'导入{renderToString};
从'react redux'导入{Provider};
从“序列化javascript”导入序列化;
从“$/containers/App”导入应用程序;
从“$/state/store”导入setupStore;
const assets=require(process.env.RAZZLE\u assets\u清单);
const server=express();
服务器
.disable('x-powered-by')
.use(express.static(process.env.RAZZLE\u PUBLIC\u DIR))
.get(“/*”,(请求,res)=>{
//编译初始状态
const preload state={counter:0};
//创建一个新的Redux存储实例
常量存储=设置存储(预加载状态);
const context={};
//将组件渲染为字符串
常量标记=renderToString(
,
);
//从我们的Redux商店获取初始状态
const finalState=store.getState();
if(context.url){
res.redirect(context.url);
}否则{
资源状态(200)。发送(
`
欢迎来到Razzle
${
assets.client.css
? ``
: ''
}
${
process.env.NODE_env===“生产”
? ``
: ``
}
${markup}
窗口。\uuuu预加载\u状态\uuuu=${serialize(finalState)}
`,
);
}
});
导出默认服务器;
我的app.js文件
import React from 'react';
import Home from '$/components/pages/home';
import Login from '$/components/pages/login';
import Logout from '$/components/pages/logout';
import '$/css/app.css';
const { Route, Switch, BrowserRouter } = require('react-router-dom');
const App = () => (
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/login" component={Login} />
<Route exact path="/logout" component={Logout} />
</Switch>
</BrowserRouter>
);
export default App;
从“React”导入React;
从“$/components/pages/Home”导入主页;
从“$/components/pages/Login”导入登录名;
从“$/components/pages/Logout”导入注销;
导入“$/css/app.css”;
const{Route,Switch,BrowserRouter}=require('react-router-dom');
常量应用=()=>(
);
导出默认应用程序;
myclient.js文件
import React from 'react';
import { hydrate } from 'react-dom';
import { Provider } from 'react-redux';
import setupStore from '$/state/store';
import App from '$/containers/app';
const store = setupStore(window.__PRELOADED_STATE__);
const { BrowserRouter } = require('react-router-dom');
hydrate(
<BrowserRouter>
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>,
document.getElementById('root'),
);
if (module.hot) {
module.hot.accept('./containers/app', () => {
hydrate(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'),
);
});
}
从“React”导入React;
从'react dom'导入{hydroge};
从'react redux'导入{Provider};
从“$/state/store”导入setupStore;
从“$/containers/App”导入应用程序;
常量存储=设置存储(窗口。\u预加载\u状态\u);
const{BrowserRouter}=require('react-router-dom');
水合物(
,
document.getElementById('root'),
);
如果(模块热){
module.hot.accept('./容器/应用',()=>{
水合物(
,
document.getElementById('root'),
);
});
}
这是因为您正在将路由器包装到另一个路由器中的另一个路由器中。嵌套路由器会导致此问题。你可以在这里看到类似的错误:@LiJonas那么你有什么建议?您能在示例中解释一下吗?您可以尝试从hydrate()
调用中删除包装器。它不起作用。我认为我的问题是关于server.js的,因为我的节点屏幕警告我:不变失败:浏览器历史需要DOM不变失败:浏览器历史需要DOM//将组件渲染为字符串const markup=renderToString(这是因为您正在另一个路由器中的另一个路由器中包装您的路由器。嵌套路由器导致此问题。您可以在此处看到类似的错误:@LiJonas,那么您有什么建议吗?您可以在示例中解释一下吗?您可以尝试从hydrate()中删除包装器)
call。它不起作用。我想我的问题是关于server.js的,因为我的节点屏幕警告我:不变量失败:浏览器历史需要DOM不变量失败:浏览器历史需要DOM//将组件呈现为字符串const markup=renderToString(