useHistory:找不到模块:无法解决“反应-路由器-域”

Question

我有这个项目，这个项目是一个ECommerce项目，在这个项目中有一个Navbar，在Navbar有三个项目，" home，Groups，购物“，问题是，当我点击"home”时，它会带我到主页，当点击“group”就会带我到组页，以及商店。

对于这件事，我用了历史和

"import { useHistory } from "react-router-dom";"

但我发现了一个错误：

Module not found: Can't resolve 'react-router-dom'

我也用了这个指令

"import { useHistory } from "react-router";" 

并得到了以下错误：

Module not found: Can't resolve 'react-router-dom'

我怎样才能解决这个问题？

package.json：

{
  "name": "c-cart-front-end",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@apollo/client": "^3.5.6",
    "@apollo/react-ssr": "3.0.0",
    "@firebase/app": "^0.6.18",
    "@types/react-slick": "^0.23.4",
    "@types/react-sticky-el": "^1.0.2",
    "@types/reactstrap": "^8.4.1",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "@zeit/next-typescript": "^1.1.1",
    "animate.css": "^3.7.2",
    "apollo-boost": "^0.4.7",
    "bootstrap-scss": "^4.4.1",
    "deepmerge": "^4.2.2",
    "firebase": "^8.3.2",
    "graphql": "^14.6.0",
    "i18next": "^19.3.4",
    "i18next-browser-languagedetector": "^4.0.2",
    "isomorphic-unfetch": "^3.0.0",
    "jimp": "^0.9.3",
    "js-cookie": "^3.0.1",
    "next": "^12.0.4-canary.4",
    "next-compose-plugins": "^2.2.0",
    "next-fonts": "^1.0.3",
    "next-images": "^1.8.4",
    "nprogress": "^0.2.0",
    "react": "^17.0.2",
    "react-apexcharts": "^1.3.9",
    "react-content-loader": "^5.0.1",
    "react-countdown": "^2.3.1",
    "react-dom": "^17.0.2",
    "react-fullpage": "^0.1.19",
    "react-helmet": "^6.1.0",
    "react-helmet-async": "^1.2.2",
    "react-hook-form": "^6.8.6",
    "react-i18next": "^11.3.4",
    "react-image": "^2.2.2",
    "react-image-lightbox": "^5.1.1",
    "react-input-range": "^1.3.0",
    "react-intl": "^4.3.1",
    "react-masonry-css": "^1.0.14",
    "react-messenger-customer-chat": "^0.8.0",
    "react-multi-carousel": "^2.5.0",
    "react-paypal-button": "^4.1.1",
    "react-responsive-carousel": "^3.1.51",
    "react-reveal": "^1.2.2",
    "react-slick": "^0.25.2",
    "react-sticky-el": "^1.1.0",
    "react-tabs": "^3.1.2",
    "react-toastify": "^5.5.0",
    "reactstrap": "^8.4.1",
    "responsive-loader": "^1.2.0",
    "rxjs-compat": "^6.5.4",
    "sass": "^1.45.1"
  }
}

此文件包含项目中的导航栏及其内的元素。

import React, { useState, useEffect } from "react";
import Link from "next/link";
import { MENUITEMS } from "../../constant/menu";
import { Container, Row } from "reactstrap";
import { useTranslation } from "react-i18next";
import { useRouter } from "next/router";
import { useHistory } from "react-router";

const NavBar = () => {
  const history = useHistory();
  const { t } = useTranslation();
  const [navClose, setNavClose] = useState({ right: "0px" });
  const router = useRouter();

  useEffect(() => {
    if (window.innerWidth < 750) {
      setNavClose({ right: "-410px" });
    }
    if (window.innerWidth < 1199) {
      setNavClose({ right: "-300px" });
    }
  }, []);

  const openNav = () => {
    setNavClose({ right: "0px" });
    if (router.asPath == "/layouts/Gym")
      document.querySelector("#topHeader").classList.add("zindex-class");
  };

  const closeNav = () => {
    setNavClose({ right: "-410px" });
    if (router.asPath == "/layouts/Gym")
      document.querySelector("#topHeader").classList.remove("zindex-class");
  };

  const [mainmenu, setMainMenu] = useState(MENUITEMS);

  useEffect(() => {
    const currentUrl = location.pathname;
    MENUITEMS.filter((items) => {
      if (items.path === currentUrl) setNavActive(items);
      if (!items.children) return false;
      items.children.filter((subItems) => {
        if (subItems.path === currentUrl) setNavActive(subItems);
        if (!subItems.children) return false;
        subItems.children.filter((subSubItems) => {
          if (subSubItems.path === currentUrl) setNavActive(subSubItems);
        });
      });
    });
  }, []);

  const setNavActive = (item) => {
    MENUITEMS.filter((menuItem) => {
      if (menuItem != item) menuItem.active = false;
      if (menuItem.children && menuItem.children.includes(item))
        menuItem.active = true;
      if (menuItem.children) {
        menuItem.children.filter((submenuItems) => {
          if (submenuItems.children && submenuItems.children.includes(item)) {
            menuItem.active = true;
            submenuItems.active = false;
          }
        });
      }
    });

    setMainMenu({ mainmenu: MENUITEMS });
  };

  const status = (title) => {
    switch (title) {
      case "home":
        return "http://localhost:3000";
      case "collections":
        return "/page/collection";

      default:
        return "http://localhost:3000";
    }
  };

  function handleClickHome() {
    history.push("http://localhost:3000");
  }

  function handleClickCollections() {
    history.push("/page/collection");
  }

  function handleClickShops() {
    history.push("/page/collection");
  }

  return (
    <div>
      <div className="main-navbar">
        <div id="mainnav">
          <div className="toggle-nav" onClick={openNav.bind(this)}>
            <i className="fa fa-bars sidebar-bar"></i>
          </div>
          <ul className="nav-menu" style={navClose}>
            <li className="back-btn" onClick={closeNav.bind(this)}>
              <div className="mobile-back text-right">
                <span>Back navbar</span>
                <i className="fa fa-angle-right pl-2" aria-hidden="true"></i>
              </div>
            </li>
            {/* {MENUITEMS.map((menuItem, i) => { */}
            {/* return ( */}
            <li
            // key={i}
            // className={` ${menuItem.megaMenu ? "mega-menu" : ""}`}
            >
              {/* <a className="nav-link" onClick={(e) => console.log("Hi")}>
                    {" "}
                    {t(menuItem.title)}
                  </a> */}
              <a
                className="nav-link"
                style={{ color: "red" }}
                onClick={handleClickHome}
              >
                {" "}
                {t("Home")}
              </a>
            </li>

            <li>
              <a className="nav-link" onClick={handleClickShops}>
                {" "}
                {t("Shop")}
              </a>
            </li>
            <li>
              <a className="nav-link" onClick={handleClickCollections}>
                {" "}
                {t("Collections")}
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
};

export default NavBar;

Answer 1

我通过以下说明解决了这个问题：

import { useRouter } from "next/router";

const router = useRouter();

  function handleClickHome() {
    router.push("http://localhost:3000");
  }

  function handleClickCollections() {
    router.push("/page/collection");
  }

  function handleClickShops() {
    router.push("/page/collection");
  }


 return (
    <div>
      <div className="main-navbar">
        <div id="mainnav">
          <div className="toggle-nav" onClick={openNav.bind(this)}>
            <i className="fa fa-bars sidebar-bar"></i>
          </div>
          <ul className="nav-menu" style={navClose}>
            <li className="back-btn" onClick={closeNav.bind(this)}>
              <div className="mobile-back text-right">
                <span>Back navbar</span>
                <i className="fa fa-angle-right pl-2" aria-hidden="true"></i>
              </div>
            </li>
            <li>
              <a
                className="nav-link"
                style={{ color: "red" }}
                onClick={handleClickHome}
              >
                {" "}
                {t("Home")}
              </a>
            </li>

            <li>
              <a className="nav-link" onClick={handleClickShops}>
                {" "}
                {t("Shop")}
              </a>
            </li>
            <li>
              <a className="nav-link" onClick={handleClickCollections}>
                {" "}
                {t("Collections")}
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  );

Answer 2

嗯，就像错误说的，你没有安装反应路由器。只需运行npm install --save react-router-dom。

您还需要使用：

import { useHistory } from "react-router-dom";

Answer 3

我认为您的反应性路由器-dom包模块是v6 (如果您现在安装的话)，所以您必须使用useNavigate而不是useHistory，参见更多：useNavigate() in react路由器v6。

// This is a React Router v6 app
import { useNavigate } from "react-router-dom";

function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}