Javascript 组件安装上的反应挂钩重定向

我试图在成功登录后管理会话，同时重定向到表单提交上的某个页面

我通常会在类组件中执行以下操作：

componentDidMount（）{
if（context.token）{
返回
}
}

但是我想使用React钩子，因此；以下代码未重定向到任何位置：

import React，{useffect}来自“React”；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter，Switch，Route，Redirect，Link}；
es6
const HomePage=props=>(
家
);
const AboutUsPage=props=>{
useffect（（）=>{
重定向到（）；
}, []);
返回(
关于我们
);
};
函数重定向到（）{
返回；
}
函数App（）{
返回(
家
关于我们
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(

我已经读到，如果钩子
useffect（）
返回一个函数，它将只在组件卸载时工作。但是它应该在组件被装载时重定向

有什么建议吗？请提前感谢。
您可以在状态上设置
重定向
变量，并根据该变量在渲染中重定向：

const AboutUsPage = props => {
  const [redirect, setRedirect] = useState(false);

  useEffect(() => {
    setRedirect(true); // Probably need to set redirect based on some condition
  }, []);

  if (redirect) return redirectTo();
  return (
    <div>
      <h1>About us</h1>
    </div>
  );
};

const AboutUsPage=props=>{
const[redirect，setRedirect]=useState（false）；
useffect（（）=>{
setRedirect（true）；//可能需要根据某些条件设置重定向
}, []);
if（redirect）返回redirectTo（）；
返回(
关于我们
);
};
您可以使用它，这样组件就可以根据页面是否被赋予令牌来选择性地呈现页面

const AboutUsPage = ({token}) => (
  token ? (
    <Redirect to="/" />
  ) : (
    <div>
      <h1>About us</h1>
    </div>
  )
);

通过使用钩子和上下文，您的
AboutUsPage
组件将类似于以下内容

import { useStateValue } from './state';
const AboutUsPage = () => {
  const [{token}, dispatch] = useStateValue();
  return token ? (
    <Redirect to="/" />
  ) : (
    <div>
      <h1>About us</h1>
    </div>
  );
};

从“/state”导入{useStateValue}；
常量AboutUsPage=（）=>{
const[{token}，dispatch]=useStateValue（）；
返回令牌(
) : (
关于我们
);
};
这是可行的，但是如果我可以在
重定向到（）中使用相同的逻辑，为什么我要使用
useffect（）
？我完全可以省略钩子，在返回JSX之前进行函数调用。这取决于，如果您只想进行重定向，那么钩子就不需要了。但是，如果您有一些复杂的逻辑连接到组件的状态来决定是否重定向，您需要使用钩子。
import { useStateValue } from './state';
const AboutUsPage = () => {
  const [{token}, dispatch] = useStateValue();
  return token ? (
    <Redirect to="/" />
  ) : (
    <div>
      <h1>About us</h1>
    </div>
  );
};