A React component that renders its best matching route
const HomeRoute = route(path("/"), () => <h1>Home</h1>);
const AboutRoute = route(path("/about"), () => <h1>About</h1>);
const NotFound = () => <h1>404 Not Found</h1>;
const AppRoutes = routeSwitch({
of: [HomeRoute, AboutRoute],
fallback: <NotFound />
});
function App() {
return (
<NavigatorProvider>
<AppRoutes />
</NavigatorProvider>
);
}
Construct a component that selects and renders the best matching route from a list of Route or Match components.
Unlike rendering multiple Match components that would each independently check if they match,
routeSwitchuses the router to intelligently select the single best match based on specificity and path depth. This ensures only one route component is rendered at a time.