javascript - React JS 中的异步路由元素返回

Question

获取错误:Guard(...):渲染未返回任何内容。这通常意味着缺少返回语句。

我想在将元素返回给路由元素之前调用我的保护组件中的 API，以检查登录用户是否可以访问特定路由。

为此，我实现了一个守卫。这是路由文件代码。

export default function Router() {
    return (
        <Routes>
            <Route path="organizations">
                <Route path="list" element={<Guard><ListOrganization /></Guard>} />
        </Routes >
    );
}

守卫组件代码

const Guard = (props) => {
    fetch('https://apiToCheckPermission.com')
    .then(response => {
        if (response.isPermission) {
            return props.children;
        }
    })
};

export default Guard;

有点像，我想实现异步路由元素。但是如果我不立即从 Guard 返回元素，React 就会抛出错误。

谁能告诉我如何解决这个错误？

Answer 1

如果 Guard 应该是一个 React 组件，那么它需要总是返回有效的 JSX。 Guard 当前不返回任何内容。 IE。它需要从 Promise 链返回一些东西，然后从函数体返回它。

要解决，请使用一些本地状态来保存已确认/已验证的权限值，并有条件地呈现 children Prop 或回退。典型的路由保护实现将等待确认用户的访问权限，然后呈现 children 或重定向到具有正在访问的位置的登录页面，以便用户可以在身份验证后重定向回来。

例子:

const Guard = ({ children }) => {
  const location = useLocation();

  const [hasPermission, setHasPermission] = React.useState(); // <-- initially undefined

  React.useEffect(() => {
    );
    fetch('https://apiToCheckPermission.com')
      .then(response => {
        setHasPermission(response.isPermission);
      });
  }, []);

  if (hasPermission === undefined) {
    return null; // or loading indicator, spinner, etc
  }

  return hasPermission
    ? children
    : <Navigate to="/login" replace state={{ from: location }} />;
};