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;

并发生此错误 hook error image

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

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 page = useRoutes(routes);

时它的工作

Answer 1

我相信你的代码没问题，所以我认为这是版本不匹配的问题。

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

entities: [__dirname + '../**/*.entity{.ts,.js}']

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

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

如果上述情况不是这样，请检查您是否在 index.js 中正确渲染了 ReactDom

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

1 个答案: