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

Question

我是React的新手，我想创建一个简单的侧边栏。我使用了react-router-dom。当我从React Router页面复制示例代码时，它给了我这个错误Invariant failed: Browser history needs a DOM 以下是我从中复制示例代码的地方。 https://reacttraining.com/react-router/web/example/custom-link

sidebar.js

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Link
} from "react-router-dom";

function CustomLinkExample() {
  return ( <
    Router >
    <
    div >
    <
    OldSchoolMenuLink activeOnlyWhenExact = {
      true
    }
    to = "/"
    label = "Home" / >
    <
    OldSchoolMenuLink to = "/about"
    label = "About" / >
    <
    hr / >
    <
    Route path = "/about"
    component = {
      About
    }
    /> <
    /div> <
    /Router>
  );
}

function OldSchoolMenuLink({
  label,
  to,
  activeOnlyWhenExact
}) {
  return ( <
    Route path = {
      to
    }
    exact = {
      activeOnlyWhenExact
    }
    children = {
      ({
        match
      }) => ( <
        div className = {
          match ? "active" : ""
        } > {
          match ? "> " : ""
        } <
        Link to = {
          to
        } > {
          label
        } < /Link> <
        /div>
      )
    }
    />
  );
}

function About() {
  return ( <
    div >
    <
    h2 > About < /h2> <
    /div>
  );
}

export default CustomLinkExample;


// export default Sidebar;

setting.js

import React, { Fragment } from 'react';
import Link from 'next/link';

function Home() {
  return (
    <Fragment>
      <div>
        Welcome to Next.js!
        <Link href="/profile">User</Link>
        <Link href="/setting">Setting</Link>
      </div>
    </Fragment>
  );
}

export default Home;

index.js

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import Sidebar from '../src/components/Sidebar';
import createBrowserHistory from 'history/createBrowserHistory';
const Setting = () => (
  <div className="setting">
    <BrowserRouter history={createBrowserHistory}>
      <Sidebar />
    </BrowserRouter>
  </div>
);
export default Setting;