Question

我正在用react-router创建我的第一个应用程序，并且由于无效的钩子错误而遇到了一些麻烦。我确实设法解决了该错误，但是我真的不明白为什么要修复该错误。因此，在我的App组件中，我有一个带有以下路由的Switch：

   <Route 
      path="/signin" 
      exact 
      render={SignIn}
   />

现在让我们假设SignIn组件看起来像这样：

import React, { useState } from 'react';

const SignIn = () => {
  const [test, setTest] = useState('test');

  return (
    <main>
      {test}
    </main>
  )
}

export default SignIn;

通过此设置，我不断收到无效的挂钩错误，该错误仅在将App组件中的Route更改为此时消失了：

<Route 
  path="/signin" 
  exact 
  render={(props) => <SignIn {...props}/>}
/>

现在这已经解决了问题，无效的挂钩问题消失了，但是为什么呢？我实际上没有在SingIn组件中使用任何道具，至少目前没有。我在这里违反了哪些React Hook规则？

Answer 1

由于SignIn是组件，因此您可以这样做：

<Route 
     path="/signin" 
     exact 
     component={SignIn}
/>

render语法是您想传递一些其他道具的时候

路由功能组件内部的UseState

1 个答案: