I can think of two ways to achieve this without complicating things:
You can let the parent component handle the async calls and maintain a state. Once the data is available and state is updated, you can render the CardComponent as a child (and pass the state data as props).
If you are using some sort of state management solution or just keeping a global state, you can define the needs for each component. Before doing route transitions, you just need to go through the needs of the component, make necessary AJAX calls and keep the data ready in the global state. Once the required data is present in the global state, you can trigger route transition and mount the component.
You don't have to check for null values (and return early) if you use the above solutions.