I'm trying to achieve functionality, where each Route will first wait for some ajax promise to resolve, and only then will render the route. I saw that onEnter doesn't exist anymore, so i'm trying the render method.
My routes are defined like that:
{cmsRoutes.map((route, idx) => {
console.log(route.resolve)
return route.component ? (<Route key={idx} path={route.path} exact={route.exact} name={route.name} render={props =>{
route.resolve()
.then(({data})=>{
console.log(data)
return (
<route.component {...props} />
)
})
} } />)
: (null);
},
)}
As you can see, it just iterates over some array, that holds the data for each route. One of the fields of the route object is "resolve", which points to a function, that returns a promise. Like this one:
const resolvemanageContactApplications = ()=> {
return ajax('/contact')
};
When executing this, i get the following error:
Route(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
This of course happens, because while the ajax is being executed, nothing is returned from the route. The question: how can i make React router 4 wait for the promise resolution? There has to be some way. I remember that AngaulrJS UI-Router actually had some "resolve" api.