diff --git a/packages/react-router/src/ReactRouter/StackManager.tsx b/packages/react-router/src/ReactRouter/StackManager.tsx index f67eb75afd..c1c7067c1b 100644 --- a/packages/react-router/src/ReactRouter/StackManager.tsx +++ b/packages/react-router/src/ReactRouter/StackManager.tsx @@ -112,7 +112,12 @@ export class StackManager extends React.PureComponent node matching the current route info. + * If no can be matched, a fallback node is returned. + */ +function findRouteByRouteInfo(node: React.ReactNode, routeInfo: RouteInfo) { let matchedNode: React.ReactNode; + let fallbackNode: React.ReactNode; + // nodes are rendered inside of a node const routesNode = findRoutesNode(node) ?? node; React.Children.forEach(routesNode, (child: React.ReactElement) => { + // Ignore any non- nodes if (child.type === Route) { const match = matchPath({ pathname: routeInfo.pathname, componentProps: child.props, }); + if (match) { matchedNode = child; } - } - }); - if (matchedNode) { - return matchedNode; - } - // If we haven't found a node - // try to find one that doesn't have a path or from prop, that will be our not found route - React.Children.forEach(routesNode, (child: React.ReactElement) => { - if (child.type === Route) { if (!(child.props.path || child.props.from)) { - matchedNode = child; + // If we haven't found a node + // try to find one that doesn't have a path or from prop, that will be our not found route + fallbackNode = child; } } }); - return matchedNode; + return matchedNode ?? fallbackNode; } function matchComponent(node: React.ReactElement, pathname: string, forceExact?: boolean) {