如果 location.state 是 null，则反应路由器重定向

Question

    import React, { useState } from "react";
    import { Redirect } from "react-router-dom";
    
    function Update(data) {
       if(!data.location.state) return <Redirect to="/"/>
       const [name, setName] = useState(data.location.state.name);
       return (<>Hello World</>)
}

错误：有条件地调用 React Hook “useState”。 React Hooks 必须在每个组件渲染中以完全相同的顺序调用 react-hooks/rules-of-hooks

Answer 1

将useState移动到 function 的顶部（在 if 条件之上）或将 if 条件移动到useEffect并从那里重定向。

function Update(data) {
 const [name, setName] = useState(data.location.state.name);
     
 if(!data.location.state) {
      return <Redirect to="/"/>
 }

  return (<>Hello World</>)
}

Answer 2

（类似的堆栈溢出问题，可能包含有用的答案。）

从文档：

不要在循环、条件或嵌套函数中调用 Hook。 相反，在任何提前返回之前，始终在 React function 的顶层使用 Hooks 。

所以useState钩子调用应该移到组件的顶部。

你可以这样做：

import React, { useState } from "react";
import { Redirect } from "react-router-dom";
    
function Update(data) { 
  const [name, setName] = useState(
    data.location.state ? data.location.state.name : ''
  );

  if(!data.location.state) return <Redirect to="/"/>

  return (
    <>Hello World</>
  );
}

Answer 3

import React, { useState } from "react";
import { Navigate } from "react-router-dom";
    
function Update(data) { 
  const [name, setName] = useState(
    data.location.state ? data.location.state.name : ''
  );

  if(!data.location.state) return <Navigate replace to="/"/>

  return (
    <>Hello World</>
  );
}