Question

我最近正在使用NextJs开发一个Web应用程序，并且一切正常，直到我想添加使用纯reactjs制作的用户和管理仪表板。以下是我的代码和错误，请尽快获得帮助。

我为用户仪表板制作了一系列路由

Route.js

//
.....

//
import Index from "./pages/views/Index"

var routes = [
  {
    path: "/views",
    name: "Dashboard",
    icon: "ni ni-tv-2 text-primary",
    component: Index,
    layout: "/user"
  },
  {
    path: "/sms",
    name: " SMS",
    icon: "ni ni-briefcase-24 text-blue",
    component: Sms,
    layout: "/user"
  },
  {
    path: "/facebook",
    name: "Facebook",
    icon: "ni ni-notification-70 text-blue",
    component: Facebook,
    layout: "/user"
  },
  {
    path: "/instagram",
    name: "Instagram",
    icon: "ni ni-notification-70 text-danger",
    component: Instagram,
    // component: Profile,
    layout: "/user"
  },
  {
    path: "/email",
    name: "Email",
    icon: "ni ni-email-83 text-success",
    component: Email,
    layout: "/user"
  },
  {
    path: "/login",
    name: "Ticket",
    icon: "ni ni-key-25 text-info",
    component: Login,
    layout: "/auth"
  },
  {
    path: "/user-profile",
    name: "Edit Profile",
    icon: "ni ni-single-02 text-pink",
    component: Profile,
    layout: "/user"
  }
];
export default routes;

在我的页面中，我创建了一个查看文件夹以显示不同的页面（仪表板的不同部分）。其中之一是index.js（用户仪表板）。 Index.js直接位于页面的views文件夹中（根据NextJs的工作方式

Index.js

import routes from "../../routes";

class Index extends React.Component {
  componentDidUpdate(e) {
    document.documentElement.scrollTop = 0;
    document.scrollingElement.scrollTop = 0;
    this.refs.mainContent.scrollTop = 0;
  }
  getRoutes = routes => {
    return routes.map((prop, key) => {
      if (prop.layout === "/pages") {
        return (
          <Route
            path={prop.layout + prop.path}
            component={prop.component}
            key={key}
          />
        );
      } 
      
      else {
        return null;
      }
    });
  };
  getBrandText = path => {
    for (let i = 0; i < routes.length; i++) {
      if (
        this.props.location.pathname.indexOf(
          routes[i].layout + routes[i].path
        ) !== -1
      ) {
        return routes[i].name;
      }
    }
    return "Brand";
  };
  render() {
    return (
      <>
      <BrowserRouter>
        <Sidebar
          {...this.props}
          routes={routes}
          logo={{
            innerLink: "/user/index",
            imgSrc: require("../../assets/img/demo-logo.png"),
            imgAlt: "..."
          }}
        />
        <div className="main-content" ref="mainContent">
          <AdminNavbar
            {...this.props}
            // brandText={this.getBrandText(this.props.location.pathname)}
          />
          <Switch>
              {this.getRoutes(routes)}
            <Redirect from="*" to="/user/index" />
          </Switch>
          <Container fluid>
            <AdminFooter />
          </Container>
        </div>
      </BrowserRouter>
      </>
    );
  }
}

export default Index;

所以NextJs Web应用程序的另一部分工作正常，直到我导航到localhost：3000 / views。我得到了错误

Invariant failed: Browser history needs a DOM
Error: Invariant failed: Browser history needs a DOM
    at invariant (C:\Users\DELL\Documents\projects\odum\node_modules\tiny-invariant\dist\tiny-invariant.cjs.js:13:11)
    at Object.createBrowserHistory (C:\Users\DELL\Documents\projects\odum\node_modules\react-router-dom\node_modules\history\cjs\history.js:273:16)
    at new BrowserRouter (C:\Users\DELL\Documents\projects\odum\node_modules\react-router-dom\cjs\react-router-dom.js:68:29)
    at processChild (C:\Users\DELL\Documents\projects\odum\node_modules\react-dom\cjs\react-dom-server.node.development.js:2995:14)
    at resolve (C:\Users\DELL\Documents\projects\odum\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5)
    at ReactDOMServerRenderer.render (C:\Users\DELL\Documents\projects\odum\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22)
    at ReactDOMServerRenderer.read (C:\Users\DELL\Documents\projects\odum\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)
    at renderToString (C:\Users\DELL\Documents\projects\odum\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27)
    at render (C:\Users\DELL\Documents\projects\odum\node_modules\next\dist\next-server\server\render.js:83:16)
    at Object.renderPage (C:\Users\DELL\Documents\projects\odum\node_modules\next\dist\next-server\server\render.js:419:16)
    at Function.getInitialProps (C:\Users\DELL\Documents\projects\odum\.next\server\static\development\pages\_document.js:304:19)
    at Object.loadGetInitialProps (C:\Users\DELL\Documents\projects\odum\node_modules\next\dist\next-server\lib\utils.js:59:29)
    at Object.renderToHTML (C:\Users\DELL\Documents\projects\odum\node_modules\next\dist\next-server\server\render.js:423:36)
    at async DevServer.renderToHTMLWithComponents (C:\Users\DELL\Documents\projects\odum\node_modules\next\dist\next-server\server\next-server.js:652:26)
    at async DevServer.renderToHTML (C:\Users\DELL\Documents\projects\odum\node_modules\next\dist\next-server\server\next-server.js:799:28)
    at async DevServer.renderToHTML (C:\Users\DELL\Documents\projects\odum\node_modules\next\dist\server\next-dev-server.js:19:539)

提前谢谢

不变失败：浏览器历史记录需要NextJs Project中的DOM

0 个答案: