Make sure Switch always controls its child routes.

index.js

@@ -67,22 +67,19 @@ export const Router = props => {
   });
 };
 
-export const Route = props => {
-  const [matches, params] = useRoute(props.path);
+export const Route = ({ path, match, component, children }) => {
+  const useRouteMatch = useRoute(path);
 
-  if (!matches && !props.match) {
-    return null;
-  }
+  // `props.match` is present - Route is controlled by the Switch
+  const [matches, params] = match || useRouteMatch;
+
+  if (!matches) return null;
 
   // React-Router style `component` prop
-  if (props.component) {
-    return h(props.component, { params: params });
-  }
+  if (component) return h(component, { params: params });
 
   // support render prop or plain children
-  return typeof props.children === "function"
-    ? props.children(params)
-    : props.children;
+  return typeof children === "function" ? children(params) : children;
 };
 
 export const Link = props => {
@@ -118,16 +115,18 @@ export const Switch = ({ children, location }) => {
   children = children && children.length ? children : [children];
 
   for (const element of children) {
+    let match = 0;
+
     if (
       isValidElement(element) &&
       // we don't require an element to be of type Route,
       // but we do require it to contain a truthy `path` prop.
       // this allows to use different components that wrap Route
       // inside of a switch, for example <AnimatedRoute />.
       element.props.path &&
-      matcher(element.props.path, location || originalLocation)[0]
+      (match = matcher(element.props.path, location || originalLocation))[0]
     )
-      return cloneElement(element, { match: true });
+      return cloneElement(element, { match });
   }
 
   return null;

test/switch.test.js

@@ -88,7 +88,7 @@ it("allows to specify which routes to render via `location` prop", () => {
   expect(rendered[0].type).toBe(Route);
 });
 
-xit("always ensures the consistency of inner routes rendering", done => {
+it("always ensures the consistency of inner routes rendering", done => {
   history.replaceState(0, 0, "/foo/bar");
 
   const { unmount } = render(