Question

React Router：无效的钩子调用。钩子只能在函数组件的主体内调用

2021-12-29

205

javascript reactjs

我有一个普通的 React 应用，使用 React Router。尝试在 Box.js 中获取 url 参数时，我收到此错误： 无效的钩子调用。钩子只能在函数组件的主体内调用。 这是代码：

Box.js

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

function Box()
{
    let params = useParams();
    return (
        <div>
            <h1>{params}</h1>
        </div>
    )
}
export default Box();

App.js

import
{
  Routes,
  Route
} from "react-router-dom";
import Box from './Box';
function App()
{
  return (
    <div className="App">
      <Routes>
        <Route exact path="/palette/:id/:color" element={<Box />} />
      </Routes>
    </div>
  );
}

export default App;

Answer 1

导出时不应调用函数。

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

function Box()
{
    let params = useParams();
    return (
        <div>
            <h1>{params}</h1>
        </div>
    )
}
export default Box;

Answer 2

从导出部分删除 ()

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

function Box(){
    let params = useParams();
    return (
        <div>
            <h1>{params}</h1>
        </div>
    )
}
export default Box;

Answer 3

如果您使用的是 npm link 或任何其他库，您的捆绑器可能会看到两个不同的反应并显示错误参见此处

或者您可以删除 ()

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

function Box()
{
    let params = useParams();
    return (
        <div>
            <h1>{params}</h1>
        </div>
    )
}
export default Box();