Async Route Element Return in React JS

August 23, 2022

Getting Error: Guard(…): Nothing was returned from render. This usually means a return statement is missing.

I want to call the API in my guard component before returning the element to Route Element to check if the logged in user have access to specific route or not.

For that, I have implemented a guard. Here’s the route file code.

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

Guard component code

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

export default Guard;

It’s kind of a thing that, I want to implement async route element. But React is throwing error if I don’t immediately return the element from Guard.

Can anyone please tell How to solve this error?

>Solution :

Try to define a state to handle the permission and useEffect to load the data:

const Guard = (props) => {
  const [hasPermission, setHasPermission] = useState(false);

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

  if (!hasPermission) return <>Unauthorized</>;

  return props.children;
};

export default Guard;