Javascript 钩子只能在函数组件的主体内部调用。（fb.me/react无效钩子调用）

有了这段代码，我就有了类似于×Hooks的错误，它只能在函数组件的主体内部调用

---

从技术上讲，您缺少两个重要步骤，

import React

部分和返回

JSX

您可以采取以下措施使其正常工作：

import  { useEffect } from "react";

export const Routes = () => {
  useEffect(() => {
    console.log("red")
  }, []);

  const a = [{ name: "sathish" }];
  const b = [{ name: "pandi" }];
  const c = [{ name: "suren" }];
  if (false) {
    return a;
  } else {
    return b;
  }
};

import React, { useEffect } from 'react';

export const Routes = () => {
  useEffect(() => {
    console.log("red")
  }, []);

  const a = [{ name: "sathish" }];
  const b = [{ name: "pandi" }];
  const c = [{ name: "suren" }];

  return a.map((e, i) => <span key={i}>{e.name}</span>);
};

我希望这有帮助

看一下，了解它们的限制以及它们的用途

不要在循环、条件或嵌套函数中调用钩子。而应始终在React函数的顶层使用钩子。通过遵循此规则，可以确保每次呈现组件时都以相同的顺序调用挂钩

与其他答案和注释不同，导入React并返回JSX不是将函数视为组件的要求

从概念上讲，组件类似于JavaScript函数。它们接受任意输入（称为“道具”），并返回描述屏幕上应显示内容的React元素

React组件的最低要求：

返回React元素1，该元素可以是任何可以呈现的元素：数字、字符串、其他元素或这些元素的数组。
请注意，布尔值和

null

被忽略。严格返回未定义的

（或不返回，两者相同）将失败

然后它必须用作组件：

或

React.createElement（MyComponent）

在渲染阶段内

class Admin extends Component {
   // rest of your code

   render() {
      return <>
         {/* rest of the code */}

         <Routes />
      </>
   }
}

您没有将

路由

用作React组件，而是在渲染阶段之外将其作为函数调用

class Admin extends Component {
   // rest of your code

   render() {
      return <>
         {/* rest of the code */}

         <Routes />
      </>
   }
}

从“js cookie”导入cookie；
从'Routes.js'导入{Routes}
从'react router dom'导入{Redirect}；
const routes=routes（）；//它说，
路由
函数不是一个组件，它不返回JSX不返回JSX不是问题所在<代码>路由

不是一个函数组件，正如错误告诉您的那样。导入React并返回JSX不是这里的问题。OP调用

Routes

的方式根本不作为组件使用，

const Routes=Routes（）

，如图所示。否则，他就不会得到错误，因为它被正确地定义为一个组件。@Emilebergron完全正确，感谢您指出这一点，刚刚更正了答案，请再次查看。