react-router-dom Route error

[nomanabid123]

If we replace <Route path="/" children={}> with

<span path="/" children={}>
it works as Route why?

[nomanabid123]

[Grapedge]

It is not an error, in fact, there is no rendering in Route, it is only used to pass props.

export function Route(
  _props: PathRouteProps | LayoutRouteProps | IndexRouteProps
): React.ReactElement | null {
  // do nothing...
}

and in Routes:

export function Routes({
  children,
  location
}: RoutesProps): React.ReactElement | null {
  return useRoutes(createRoutesFromChildren(children), location);
}

createRoutesFromChildren will recursively traverse the child nodes and create routes based on the props of the child nodes, so no matter what node it is, as long as the props are in the shape of RuleObject

export function createRoutesFromChildren(
  children: React.ReactNode
): RouteObject[] {
  let routes: RouteObject[] = [];

  React.Children.forEach(children, element => {
    // ......
    let route: RouteObject = {
      caseSensitive: element.props.caseSensitive,
      element: element.props.element,
      index: element.props.index,
      path: element.props.path
    };
    if (element.props.children) {
      route.children = createRoutesFromChildren(element.props.children);
    }
    routes.push(route);
  });

  return routes;
}

[nomanabid123]

thank you

[priyeshshah147]

I am having this error
Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a

index.js

App.js

[mjackson]

Just FYI we added an invariant that will yell at you about this in #8238

[nomanabid123]

okay thank you

…

On Sat, Nov 6, 2021 at 1:08 AM Michael Jackson ***@***.***> wrote: Just FYI we added an invariant that will yell at you about this in #8238 <#8238> — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#8210 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASVJ2ILJ5XB6TNHVXO7YIH3UKRBWDANCNFSM5HLK2HMQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.