路由功能组件中的 UseState

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

UseState inside routed functional components

setstate

reactjs

react-router

react-props

react-hooks