React 18报错：Hooks只能在函数组件内部调用问题排查

你的问题出在组件导出的方式上：

你当前写的是：

export default DetailTitle();

这里你直接调用了DetailTitle函数，导出的是函数执行后返回的JSX元素，而不是组件函数本身。当你直接执行函数时，里面的useParams钩子是在React组件渲染流程之外被调用的，这就违反了Hook只能在函数组件体内部调用的规则，所以触发了警告。

修正方法很简单，只需要导出组件函数本身，不要加括号调用：

import { useParams } from 'react-router-dom';

const DetailTitle = () => {
    const params = useParams();
    console.log(params);
    return (
        <div className="wrapper">
            <div className="container">
                <h2>DetailTitle</h2>
            </div>
        </div>
    );
};

export default DetailTitle;

这样React就能正确识别这是一个函数组件，在组件渲染时会自动执行它，此时useParams就在正确的组件上下文里调用，不会再触发警告。

内容的提问来源于stack exchange，提问作者Anh Vũ