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

Question

我的 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

Answer 1

在 NextJS 中，您不必ReactDOM.render像在普通 ReactJS 应用程序中那样添加部件。NextJS 在渲染应用程序时自己做这件事。

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

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

export default Index;

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

学习 NextJS 文档