reactjs - 使用 useState 对路由进行 React 身份验证

Question

我正在尝试个人项目学习 react 不要只使用 redux钩子(Hook)。所以我有一个简单的自定义 Hook

const useAuth = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  return { isAuthenticated, setIsAuthenticated };
};

用于将身份验证设置为 true

但它不起作用。

这里你可以看到一个例子

https://stackblitz.com/edit/react-rky7dn?file=src%2Flogin.js

谁能告诉我哪里出了问题？

Answer 1

您定义正确但使用错误。您想在 App.js 中只使用一次 Hook ，然后将“setIsAuthenticated”传递给您的 Login.js(不要再次调用 Hook )

//App.js
const { isAuthenticated, setIsAuthenticated } = useAuth();
...
<Route path="/login">{!isAuthenticated ? <Login setIsAuthenticated={setIsAuthenticated}/> : <Redirect from="/login" to="/" />}</Route>

//Login.js
const Login = ({setIsAuthenticated}) => {
....