hookrouter
hookrouter copied to clipboard
useRoutes match is different every render
The following does render and accurately routes
const routes = {
'/:id*': ({ id }) => props => <MyComponent {...props} id={id} />
};
const App = (props) => {
const res = useAPI();
const match = useRoutes(routes);
if (!match) return 'Page not found';
return (
<ErrorBoundary>
{match({ ...props, ...res })}
</ErrorBoundary>
);
};
MyComponent should render and should take in props and the res of the api. It does do this, but it also unmounts and remounts with every render of App. When the useAPI updates its inner state and causes a rerender, the MyComponent remounts.
It seems like useRoutes does not memoize the reference to any function or object it creates and thus recreates them even if the route does not change