React 路由器 dom 重定向功能不重定向答案

【问题标题】：React router dom redirect function is not redirectingReact 路由器 dom 重定向功能不重定向
【发布时间】：2023-02-03 01:04:26
【问题描述】：

我的 useEffect 中有一个获取函数，它从后端获取一些数据，但它发送一个 jwt 令牌来检查用户授权以检索数据......

如果用户未被授权，我想将其重定向到我未授权的页面，但重定向功能根本不起作用，它根本没有任何作用。

这就是我的 useEffect 的样子：

  useEffect(() => {
    const populateData = async () => {
      const response = await OS_Service.getAll('user.token');

      if(!response) return redirect('/unauthorized')
  
      setAllServiceOrders(response.data);
      setFetching(false);
     };
    populateData();
  }, [setAllServiceOrders, user]);

任何人都知道为什么它不工作？

【问题讨论】：

你在'/unauthorized'路线上有警卫吗？
问题可能出在您尝试在 useEffect 挂钩内调用的重定向函数。您能否提供更多有关如何实现重定向功能的信息？此外，请确保重定向功能具有将用户重定向到所需页面的必要逻辑。

标签： reactjs react-router

【解决方案1】：

import { useHistory } from 'react-router-dom

const Comp = () =>{
const history = useHistory()
 ......
    useEffect(() => {
        const populateData = async () => {
          const response = await OS_Service.getAll('user.token');

          if(!response) history.push('/unauthorized')
  
          setAllServiceOrders(response.data);
          setFetching(false);
         };
        populateData();
      }, [setAllServiceOrders, user]);
  ........
  return (<>......</>)
}

【讨论】：

我尝试使用 useNavigate 尝试捕获以移动到未经授权的页面，重定向功能只是因为一些奇怪的原因而拒绝工作

【解决方案2】：

redirect 实用函数仅用于 Route 加载程序和操作。在 React 组件中，你应该使用 useNavigate 钩子。

例子：

const navigate = useNavigate();

useEffect(() => {
  const populateData = async () => {
    const response = await OS_Service.getAll('user.token');

    if (!response) {
      navigate('/unauthorized', { replace: true });
      return;
    }
  
    setAllServiceOrders(response.data);
    setFetching(false);
   };

  populateData();
}, [setAllServiceOrders, user]);

【讨论】：