为什么反应useRoutes给我无效的钩子错误？

Question

我试图在我的项目中添加路由，但出现了一些错误

​

import React from "react";
import News from "./NewsComponents/News";
import Photos from "./PhotosComponents/Photos";
import Contact from "./Contact";
import Home from "./Home";
import { useRoutes, setBasepath } from "hookrouter";

setBasepath("/");

const routes = {
  "/": () => <Home />,
  "/news": () => <News />,
  "/photos": () => <Photos />,
  "/contact": () => <Contact />,
};

function MainComponent() {
  const page = useRoutes(routes);
  return <div>{page || alert("error")}</div>;
}
export default MainComponent;

​

并发生这个错误，钩子误差图像

更新，所以如果没有问题，这里还有其他组件

​

import React, { useState } from "react";
import "./App.css";
import Header from "./components/header";
import Footer from "./components/Footer";
import MainComponent from "./components/MainComponent";
import { navigate, setBasepath } from "hookrouter";

setBasepath("/");

function App() {
  const [button, setButton] = useState("home");
  const toggle = (e) => {
    if (e.target.id === "home") {
      setButton("home");
      navigate("/");
    } else if (e.target.id === "news") {
      setButton("news");
      navigate("/news");
    } else if (e.target.id === "photos") {
      setButton("photos");
      navigate("/photos");
    } else if (e.target.id === "contact") {
      setButton("contact");
      navigate("/contact");
    }
  };

  return (
    <div>
      <Header button={button} onClick={toggle} />
      <MainComponent />
      <Footer />
    </div>
  );
}

export default App;

在index.js中

​

​

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

我找不到问题是在哪里尝试解决这一切，但没有任何结果，它的工作，当我删除const页=useRoutes(路由)；

​

Answer 1

我相信您的代码在那里是好的，所以我认为这是版本错配的问题。

在package.json中设置下面的这些版本。

"hookrouter": "^1.2.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",

运行npm ci。

如果这不起作用，请尝试用<div></div>替换路由内的组件，以查看是否有任何组件导致问题。

如果不是上述情况，请检查您是否在ReactDom中正确地呈现index.js。