不变式失败：浏览器历史记录需要一个 DOM答案

【问题标题】：Invariant failed: Browser history needs a DOM不变式失败：浏览器历史记录需要一个 DOM
【发布时间】：2019-12-28 16:43:36
【问题描述】：

我的 App.js（已简化，但仍然有这么多错误。）

import React, { Component } from "react";

class App extends Component {
  state = {};

  componentDidMount() {
    this.setState({ user });
  }
}

export default App;

我现在更新了我的 index.js：

import React from "react";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const Index = () => (
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

export default Index;

它给出了错误Invariant failed: Browser history needs a DOM

【问题讨论】：

你能分享一下你配置了“模块”和“目标”的配置文件吗？
我不确定你的意思，但我已经编辑了帖子以显示我的 next.config.json。
你能展示你的 App 组件吗？
我现在已经添加了我的 app.js。
我原来的确实有渲染方法，是的。

标签： reactjs next.js

【解决方案1】：

在 NextJS 中，您不必像在普通 ReactJS 应用程序中那样添加 ReactDOM.render 部分。 NextJS 在渲染应用程序时会自己执行此操作。

最低限度，您必须让应用程序运行是在pages 目录中添加一个index.js：

const Index = () => (
  <div>
    <p>Hello Next.js</p>
  </div>
);

export default Index;

注意这里的Index组件是默认导出的。

Learn NextJS Docs

【讨论】：

这是我更新后的 index.js，提供 Invariant failed: Browser history needs a DOM
你也不需要使用react-router，NextJS自带路由模块。在开始之前请阅读basics