React - Invariant失败:浏览器历史记录需要DOM
React是一个用于构建用户界面的JavaScript库。它被广泛应用于前端开发领域，可以帮助开发者更高效地构建交互式的、可复用的UI组件。
在React开发过程中，有时会遇到"Invariant失败:浏览器历史记录需要DOM"的错误信息。这个错误通常是由于使用React Router（React的官方路由库）时遇到的。它表明React Router的某个部分试图使用浏览器的历史记录API，但此时可能不存在DOM环境（例如在服务端渲染时）。
要解决这个问题，可以考虑以下几个方案：
- 确保代码在DOM环境下运行：由于浏览器历史记录API需要DOM支持，因此确保代码在浏览器环境下运行是解决问题的关键。可以通过检查
window对象是否存在来判断当前环境是否为浏览器环境，然后再执行与浏览器相关的代码。 - 使用
BrowserRouter代替MemoryRouter：如果你在服务端渲染时遇到这个错误，可能是因为你使用了MemoryRouter，它在不依赖浏览器的情况下工作。尝试使用BrowserRouter来替代MemoryRouter，因为BrowserRouter会使用浏览器的历史记录API。 - 检查React Router的版本兼容性：有时，这个错误可能是由于React Router的版本与React本身的版本不兼容导致的。确保使用的React Router版本与React版本兼容，并尝试升级到最新的React Router版本。
- 检查React Router的配置和使用：确保在使用React Router时正确配置和使用相关的组件和API。可以参考React Router的官方文档或社区资源来获得更多关于React Router的详细信息。
对于React开发者来说，理解React Router的工作原理和正确使用React Router是解决这个错误的关键。在腾讯云的产品生态中，可以参考腾讯云的云服务器CVM、容器服务TKE、Serverless云函数SCF等产品来搭建和部署React应用。这些产品提供了稳定可靠的基础设施和环境，以支持React应用的运行和扩展。具体产品信息可以参考腾讯云官方网站的相关页面。
参考链接：
- React官方网站：https://reactjs.org/
- React Router官方文档：https://reactrouter.com/
- 腾讯云云服务器CVM产品介绍：https://cloud.tencent.com/product/cvm
- 腾讯云容器服务TKE产品介绍：https://cloud.tencent.com/product/tke
- 腾讯云Serverless云函数SCF产品介绍：https://cloud.tencent.com/product/scf
相关·内容
在服务器端react中使用react-router-dom会产生错误。
Invariant Violation: Browser history needs a DOM
如果BrowserRouter与我的组件路径匹配，我将使用react-router-dom div呈现我的组件。
const routes = [
{ path: 'dashboard',
exact: true,
component: Dashboard
},
{ path: 'notification',
exact: true,
compo
浏览 0提问于2017-11-09得票数 0
我正在尝试使用react路由器4进行服务器端呈现。
根据服务器上的示例，我们应该使用StaticRouter。当我按示例导入时，我认为StaticRouter是未定义的
import {StaticRouter} from 'react-router';
在网上做了一些调查之后，我发现我可以使用react-router-dom。现在我的import语句看起来是这样的。
import {StaticRouter} from 'react-router-dom';
但是，当我运行代码时，我将在浏览器中获取Invariant Violation: Browser hi
浏览 5提问于2017-03-28得票数 36
我可以在dev模式下成功地运行一个应用程序，但是每当我试图构建应用程序时，我就会得到一个
10 | function InvariantError(message) {
11 | if (message === void 0) { message = genericMessage; }
> 12 | var _this = _super.call(this, typeof message === "number"
| ^
13 | ? genericMessage + ": " + mess
浏览 6提问于2020-04-26得票数 0
我想要实现的是，我想要将post请求发送到节点服务器，然后从post request中提取主体，然后用 body 从post请求中提取出我的react应用程序(其中包含路由)
在我在react应用程序中创建的服务器中，我使用了以下代码
import express from "express";
import fs from "fs";
import path from "path";
import React from "react";
import ReactDOMServer from "react-dom/s
浏览 1提问于2021-07-29得票数 0
在我自己的代码中，我试图通过将react-router的useHistory添加到imports中来使用它：
import {BrowserRouter as Router, Link, Route, Switch, useHistory} from "react-router-dom";
然后用它在我的App()函数上定义一个变量：
let history = useHistory();
当我这样做的时候，我得到了错误：
TypeError: useContext(...) is undefined
来自react-router的hooks.js，具体行是：
return u
浏览 1提问于2020-05-11得票数 17
我目前正在一个应用程序中实现React Router v.4，在该应用程序中，我还使用了Webpack进行捆绑。在我的webpack配置中，我已经将React、ReactDOM和React-router-dom设置为外部依赖项。我使用脚本标记将它们导入到我的index.html。我不能让这种方法工作。当我在webpack的外部部分中设置了以下内容时，我从React中得到了以下错误：
externals: {
"react-router": "ReactRouter",
"react-router-dom: "ReactRouterDOM"
浏览 0提问于2017-11-16得票数 2
我已经创建了这个示例repo，它使用rails (v4.2.6)和react rails (v1.6.2)和react路由器(v2.0.0-rc5)：
在文件app/views/application/react_entry_point.html.erb中，我使用
<%= react_component('MountUp', {}, {prerender: false}) %>
组件MountUp呈现我的路由器：
class MountUp extends React.Component {
render() {
return(
<Ro
浏览 1提问于2016-03-11得票数 4
回答已采纳
我正在使用react路由器和gridjs，并希望在一个单元格内显示一个链接，用户可以单击该链接以转到详细页面。
作为第一种方法，我尝试使用列格式化程序：
import { Link } from "react-router-dom";
import { Grid } from 'gridjs-react';
const linkFormatter = (cell, row) =>
_(
<Link to={`/jobs/${row.cells[1].data}`} className="font-bold">
浏览 0提问于2021-03-09得票数 0
1回答
类型记录和反应路由器
、、、
试图站起来和运行的反应-路由器的类型记录。我已经安装了@type/reads路由器，但是我遇到了一个错误，错误是：
@types/react-router/index"' has no exported member 'hashHistory'
我一直在尝试不同版本的路由器和类型。我现在的版本是：
react: 16.3.2
react-router: 4.2.0
@types/react-router: 4.0.23
我看过上的打字项目。index.ds.ts不显示hashHistory正在导出。但是，这里有一个v3文件夹，而其中的index.ds.ts是这
浏览 0提问于2018-04-18得票数 0
回答已采纳
我所收到的错误，出于任何目的，我认为我不应该是:)
流量是
Client history.js > client/index.js > history = createBrowserHistory > <App history={history} />
服务器 history.js > server/index.js > history = createMemoryHistory > <App history={history} />
我可以确认在服务器上正在使用内存，然后它就会掉下来，所以我们永远不会到达BroswerHistory
浏览 1提问于2018-11-26得票数 3
回答已采纳
我已经尝试跟随，试图在我的reactable中获得一个可实现的表，并且我遇到了与Invariant Violation: Invariant Violation: Invariant Violation: Invariant Violation: Invariant Violation: View config not found for name th类似的不断的错误。我试着为教程运行，但是我一直在获取Invariant Violation: Invariant Violation: Invariant Violation: Invariant Violation: Invariant Vi
浏览 0提问于2018-11-04得票数 0
回答已采纳
我很难找到解决问题的方法，尽管我很难找到Sensei的搜索技巧。
虽然我的应用程序与反应路由器没有任何问题，故事书抛出的错误“不变失败:你不应该使用外部”。
Error: Invariant failed: You should not use <Link> outside a <Router>
at invariant (tiny-invariant.esm.js:11)
at react-router-dom.js:181
at updateContextConsumer (react-dom.development.js:19747)
浏览 21提问于2019-11-18得票数 37
回答已采纳
有一个名为"createBrowserHistory.d.ts"的文件，该文件的用途是什么？
下面的代码没有错误，但是当我尝试运行它时，它会显示为空白吗？为什么会这样？
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import { Router, Route, Switch } from "
浏览 0提问于2019-03-18得票数 0
我正在使用新的useHistory钩子反应路由器，这是几个星期前出来的。我的反应路由器版本是5.1.2.我的反应是16.10.1版。你可以在底部找到我的密码。
然而，当我从react路由器导入新的useHistory时，我会得到以下错误：
Uncaught TypeError: Cannot read property 'history' of undefined
它是由反应性路由器中的这一行引起的。
function useHistory() {
if (process.env.NODE_ENV !== "production") {
!(type
浏览 8提问于2019-10-03得票数 56
回答已采纳
感谢您提前打开此页面。我是一个自学的程序员。现在我正在用Bootstrap制作我的个人页面。
我现在想做的是: React.js的SPA特性。我所理解的这个特征是；
从"react-router-dom";And安装“react-dom”，导入{ Link，NavLink }，将这些锚点和href标记替换为Link to=
以下代码位于“src”文件夹中。
Navbar.js
import React from "react";
import logoImage from "../components/logo.png";
// React fo
浏览 3提问于2021-04-10得票数 2
回答已采纳
我得到的错误是由于一些错误的导入，我猜。以下是错误：
./src/index.js
SyntaxError: E:\REACT_APP\drf_project\src\index.js: Unexpected token (6:21)
4 | import './index.css';
5 | import Route from 'react-router-dom';
> 6 | import BrowserRouter as Switch from 'react-router-dom';
|
浏览 0提问于2021-01-27得票数 1
1回答
我是使用jest进行测试的新手，我想测试以下代码。 import React from "react";
import "./ButtonLogin.css";
import { Link } from 'react-router-dom';
function ButtonLogin() {
return (
<Link to="/login"> <button className="button-login">Iniciar sesión</button&
浏览 98提问于2021-11-08得票数 0
回答已采纳
我有一个反应网站在网络主机上运行，我试图添加react router到它，所以我安装了react-router-dom使用npm，但我得到这个错误，没有进一步解释的错误消息或任何事情。
我尝试将react-router-dom更改为react-router，这是旧版本，但是我得到了不同的错误，所以我返回了returned。
// src/Container3d.js
import React, { Component } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-
浏览 0提问于2019-09-09得票数 6
回答已采纳
1回答
反应元件的摩卡测试历史
、、、
我已经开始用Mocha为我的react组件编写测试了。当我开始进行npm测试时，我得到了一个例外
Invariant Violation: Browser history needs a DOM
我试图将历史记录对象连接到测试文件：
import React, {Component} from 'react'
import Modal from 'react-modal';
import expect from 'expect'
import TestUtils from 'react-addons-test-utils'
浏览 0提问于2016-06-06得票数 2
回答已采纳
"Error: Invariant :您不应该在<Router>外部使用<Route>“有很多问题，但这个问题的不同之处在于，只有在使用返回<Route>的库中的组件时才会出现这个问题。
我的目的是在公司的其他人可以使用npm安装的私有库中创建一个<GuardedRoute>组件。这个新组件返回一个<Route>，但首先检查谓词的返回值；如果检查失败，<Route>将指向某个替代页面组件。一个简单的用例是检查用户是否通过了身份验证。如果是，则将呈现component中的所有内容；如果不是，则将呈现替代页面组件，即登
浏览 0提问于2020-04-29得票数 2
我有一个成功的部署
useLocation
/Users/hvaandres/Desktop/Development/Ecommerce/modules/hooks.js:29
26 | );
27 | }
28 |
> 29 | return useContext(Context).location;
30 | }
31 |
32 | export function useParams() {
成功：
Compiled successfully!
You can now view ecommerce-store in the browser
浏览 2提问于2021-03-03得票数 0
回答已采纳
当我像这样添加自定义历史的参数时，我在我的React中得到了以下错误： <Router history={history}> 我从ESLint得到这个错误： [eslint] Parsing error: Unexpected token =
(JSX attribute) history: History<any> 这是我的.eslintrc.js文件： export default {
parser: 'babel-eslint',
extends: 'airbnb',
parserOptions: {
ecma
浏览 26提问于2019-01-29得票数 0
回答已采纳
我正试图在我的React中实现服务器端渲染。在server.js中，我只是监听任意路由(/*)，并使用react服务器生成一个字符串并将其发回。
但是"withRouter“在抱怨，因为它认为它不在路由器内。但很明显是这样。这很奇怪。
client/src/App.js
class App extends Component {
render() {
return (<div>Hello</div>)
}
}
export default withRouter(App)
server/index.js
const content
浏览 3提问于2020-06-02得票数 1
回答已采纳
5回答
我想在我的Chrome扩展2页。例如:第一个(默认)页面包含用户列表，第二个页面包含此用户的操作。 我想通过单击user(在我的例子中是ClickableListItem)来显示第二个页面。我使用React和React Router。下面是我所在的组件： class Resents extends React.Component {
constructor(props) {
super(props);
this.handleOnClick = this.handleOnClick.bind(this);
}
handleOnClick() {
console.log('n
浏览 45提问于2016-12-27得票数 8
回答已采纳
我使用react-router-dom在我的React应用程序中路由。我的应用程序的一部分是在另一个包中提取的。依赖项列表如下所示：
./app/dashboard/package.json
{
"dependencies": {
"@app/components": "^1.0.0",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-router-dom": "^5.0
浏览 1提问于2019-04-06得票数 84
回答已采纳
2回答
如果props.fields的长度为零，我想重定向页面。但问题是它被渲染了两次，所以当它为空时，它会被重定向，而不会等待第二次。我是个新手，如果有人能帮我，那就太好了。我已经花了几个小时来解决这个问题。 import React, { Component, useEffect, useState } from 'react'
import Field from './field'
import {Redirect} from 'react-router-dom'
export default function FieldList(pr
浏览 40提问于2021-01-30得票数 2
我终于在几个小时后完成了我的Webpack、React和Babel构建设置，但是当我尝试运行一个简单的呈现Hello World时，它不会在DOM中输出任何内容。
这是我的密码。
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('content')
);
<!DOCTYPE html>
浏览 9提问于2015-12-14得票数 4
回答已采纳
1回答
我检查过这里和这里，但这对我有帮助。我使用的反应路由器版本4，当我试图运行控制台时，也没有显示任何东西或我的页面。请帮帮我，我在这里放了一个控制台，它也没有打印任何东西，这意味着我的headerContainer，它自己，没有被渲染，这里是我的index.js
import ReactDOM from 'react-dom';
import React from 'react';
import { Provider } from 'react-redux';
import configureStore from './stores/co
浏览 3提问于2017-07-31得票数 0
回答已采纳
2回答
巴贝尔反应预置和反应的问题
、、、、
我正在使用webpack和babel将我的jsx文件预处理成javascript。我的配置如下所示：
Webpack.config.js
module.exports = {
entry: "./react/main.jsx",
output: {
path: __dirname,
filename: "./public/javascripts/app.js"
},
module: {
loaders: [
{
test: /\
浏览 1提问于2016-02-03得票数 0
我很困惑为什么在控制台中会出现这个错误。我已经阅读了所有的工作，据我所知，我这样做是正确的。
在我的页面上
<div id="aisis-writer"></div>
我要把我的反应元件绑在那里。然后，我创建了一个简单的React组件，它不呈现任何内容：
var AisisWriter = React.createClass({
getInitialState: function(){},
componentDidMount: function(){},
render: function(){
return null;
}
}
浏览 5提问于2014-12-12得票数 3
因此，我试图从我正在处理的组件中的道具中获取历史对象，它总是打印一个错误--这是我试图在其中使用历史对象的类
import React from 'react';
const Admin = (props) => {
return (
<React.Fragment>
<h1>Admin</h1>
<button
onClick={()=>this.props.history.push("/edit/new")}
type=
浏览 5提问于2021-12-09得票数 2
我在react中构建了一个页面，其中包含多个按钮，这些按钮指向不同的URL。如果应用程序安装在移动设备上，则其中一个按钮将打开该应用程序。 但是，如果在桌面上的web浏览器或未安装该应用程序的设备上按下此按钮，则不会有任何反应。 如果用户未安装应用程序或使用桌面上的web浏览器，我如何将用户重定向到另一个页面。 下面是带有 <FunkyButton><a href="waterapp://xyz.co.uk" style={{ color: "white" }}>Open App</a></FunkyButton>
浏览 22提问于2019-10-16得票数 0
回答已采纳
我在控制台中得到了上面的错误，尽管我正在正确地返回要呈现的组件。以下代码中的errorTexts = ["email is invalid"]值
if(@state.errorTexts.length>0)
dangerouslySetInnerHTML: {
__html: ReactDOMServer.renderToString(
React.createElement AdminError, errorTexts: @state.errorTexts
)
浏览 5提问于2016-03-14得票数 1
回答已采纳
8回答
我试着在使用Webpack的时候用Jest/酶测试一种反应组分。
我有一个很简单的测试
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';
it('App', () => {
const app = shallow(<App />);
expect(1).toEqual(1);
});
它正在收集的相对成分是：
import React, { Component } from
浏览 8提问于2016-10-11得票数 42
回答已采纳
1回答
用盖茨比对路由器作出反应
、、、
我现在有一个用CRA构建的应用程序，它使用Reactive路由器。我现在正在尝试通过Gatsby来呈现我的应用程序的一部分，这样非技术用户就可以通过CMS控制应用程序这一部分的内容。
我目前在开发服务器上工作的内容，但是当我试图构建时就会死掉。
这是我的gatsby-node
exports.onCreatePage = async ({ actions, page }) => {
const { createPage } = actions;
return new Promise((resolve, reject) => {
if (page.path ===
浏览 6提问于2019-11-05得票数 4
1回答
这个问题被问到了
但似乎没人接电话。所以我也会告诉你我的问题；
我使用BrowserRouter处理路由，但它在刷新时不起作用，所以我采用了一个简单的解决方案，并用HashRouter替换了它。
而且帧运动退出动画刚刚被禁用，显示动画和其他仍然可以正常工作。仅退出动画停止。
import ReactDOM from "react-dom";
import { HashRouter } from "react-router-dom";
import App from "./App";
ReactDOM.render(
<React.St
浏览 1提问于2021-03-28得票数 0
2回答
我有一个带有.net前端(v16.14.0)的ReactJS 5应用程序，它是从Visual + Redux模板创建的。这个应用程序可以从MS团队访问，我希望实现单点登录，所以我正在从另一个项目中复制一些代码，该项目就是这样做的( ProtectedRoute类)，但是我得到了以下错误，即使我已经将项目剥离回了基本的部分
Uncaught Error: Invariant failed: You should not use <Route> outside a <Router>
at invariant (tiny-invariant.esm.js:12:1)
浏览 7提问于2022-06-06得票数 0
在React Router 3.0.5中，站点工作正常，但当我尝试更新到React Router 4.1.1时，我得到了一些错误。我尝试将主路由设置为"/“，否则它将转到列出的其他组件。
我得到一个错误: Warning: Failed prop type:这个prop类型在Router中被标记为required，但它的值是undefined。在路由器中
和这个错误: Router.js:31未捕获位置:无法读取未定义的属性‘TypeError’
下面是我的代码App.jsx：
import React from 'react';
import LeftPane f
浏览 2提问于2017-05-21得票数 0
我得到了一个错误：
Error: Invariant failed: You should not use <Switch> outside a <Router>
但让我发疯的是，我的“开关”标签实际上被“BrowserRouter”包围着。
import {BrowserRouter, Route} from "react-router-dom";
import {Switch} from "react-router";
....
function App() {
return (
<AuthContext
浏览 8提问于2021-12-11得票数 1
回答已采纳
4回答
嗨，我在react中映射url有困难。我是完全新的反应js。我正在尝试将组件呈现到我的App中，当我呈现组件时，事情进行得很好，但是当我试图将它呈现为一个路由时，我尝试了这个错误，我尝试了一些可用的解决方案堆栈溢出，比如导入它作为‘react.i’，路由而不是Route，但是仍然无法修复这个bug.please指南来修复这个错误。
enter code here
import {
BrowserRouter as Router,
Route,
} from "react-router-dom";
import './App.css';
import
浏览 6提问于2022-01-22得票数 1
我有一个<UserListComponent />，它输出一个<Contact />组件和由<Contacts />表示的联系人列表。
问题是，在对<UserListComponent />的测试中，当我尝试挂载它时，test输出一个错误Invariant Violation: You should not use <Route> or withRouter() outside a <Router>
<Contacts />组件中使用了withRouter()。
如何在父组件测试中模拟没有路由器的Contact
浏览 134提问于2018-04-25得票数 84
这就是我要犯的错误，
Uncaught Error: Invariant failed: You should not use <Link> outside a <Router>
at invariant (tiny-invariant.esm.js:12:1)
at Link.js:89:1
at updateContextConsumer (react-dom.development.js:21207:1)
at beginWork (react-dom.development.js:21652:1)
at HTMLUnknownElement.callCallba
浏览 12提问于2022-07-19得票数 0
回答已采纳
我最近创建了我的webpack配置文件：
const path = require("path");
const SRC_DIR = path.join(__dirname, "/client/src");
const DIST_DIR = path.join(__dirname, "/client/dist");
module.exports = {
entry: `${SRC_DIR}/index.jsx`,
output: {
filename: "bundle.js",
path: DIST_D
浏览 1提问于2018-06-13得票数 24
回答已采纳
我制作了复杂的react应用程序，但在aws放大上部署了它之后，我不知道为什么会出现这些错误，在本地，这是错误日志。
Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at j (react.production.min.js:18)
浏览 6提问于2022-03-08得票数 0
1回答
我收到了错误消息Target container is not a DOM element。利用webpack。
全错误：
FAIL src/App.test.js
● Test suite failed to run
Invariant Violation: Target container is not a DOM element.
at invariant (node_modules/fbjs/lib/invariant.js:42:15)
at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/re
浏览 0提问于2018-08-10得票数 1
回答已采纳
我目前正在尝试使用function路由器v4将我的导航条与v4()函数分离开来。但是，如何使用新的react路由器v4和链接组件将导航条移动到单独的文件？
我的应用程序client.js的起点
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Route, Link} from 'react-router-dom'
浏览 0提问于2017-04-13得票数 1
回答已采纳
我正在尝试用户浏览器路由，以呈现一个不同的组件在我的应用程序。使用本教程作为参考：
当我尝试使用this.props.history.push(‘我想去的路径’)时，我得到了TypeError:无法读取未定义的属性'push‘。常见的解决方案是使用withRouter()包装组件，但是我已经这样做了，并且仍然会收到错误。
我还尝试重定向到与'/‘不同的路径。
我在不同的组件中使用了相同的函数，它工作得很好。
以下是错误：
TypeError: Cannot read property 'push' of undefined
AuthenticatedCompon
浏览 1提问于2020-07-22得票数 0
回答已采纳
我尝试使用jest运行测试，但它因错误而中断： Invariant Violation: Native module cannot be null.
at invariant (node_modules/invariant/invariant.js:40:15)
at RNFBNativeEventEmitter.NativeEventEmitter (node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:36:7)
at new RNFBNativeEventEmi
浏览 13提问于2020-01-14得票数 3
1回答
我从RAPR15.4升级到17.0.2
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.3.0",
我需要重定向到一个URL，但不能让它工作。这就是它过去的工作方式
在我的记录列表中，我有一个函数
renderRedirect = () => {
if (this.props.URL) {
retur
浏览 9提问于2021-12-14得票数 0
回答已采纳
3回答
也许这个问题是因为新版本的react路由器有几天的时间，但是我一直在阅读这个问题，我想澄清一下发生了什么。我正在使用react路由器的最后一个版本，我想通过redux完成路由。我遵循redux路由器模块：文档中列出的步骤，但在实现时会收到此错误：(我知道问题在服务器呈现中)
Invariant Violation: Browser history needs a DOM
下面是我的代码(重要的部分)：
server.js
import { Provider } from 'react-redux';
import store from './store';
l
浏览 7提问于2017-04-16得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
