Breadcrumb's restriction on children prop is too strict

[otakustay]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Breacrumb accepts only BreadcrumbItem ans BreadcrumbSeparator as its children (or customized component with a magic static property), this could introduce difficulty integrating with routers or filters like:

<Breadcrumb>
    <Route path="some-url">
        <Breadcrumb.Item ... />
    </Route>
    <AuthorizationGuard onlySigninIn roles={['admin']}>
        <Breadcrumb.Item ... />
    </AuthorizationGuard>
</Breadcrumb>

This JSX is more compliant to React's "declarative" philosophy, especially with react-router v6's relative routing, but Breadcrumb can warn about it.

What does the proposed API look like?

I've inspected the implement and find that the restriction is about rendering separator's inside breadcrumb items:

<div class="ant-breadcrumb">
  <span>
    <span class="ant-breadcrumb-link"></span>
    <span class="ant-breadcrumb-separator"></span>
  </span>
  <span>
    <span class="ant-breadcrumb-link"></span>
    <span class="ant-breadcrumb-separator"></span>
  </span>
</div>

Despite some complex css customizations, I'd prefer separators to be rendered independently:

<div class="ant-breadcrumb">
  <span class="ant-breadcrumb-link"></span>
  <span class="ant-breadcrumb-separator"></span>
  <span class="ant-breadcrumb-link"></span>
  </span>
</div>

Layout can be implemented with flex and gap like Space component already does. In this case we can allow any element as Breadcrumb's children by simply wrapping them inside span.ant-breadcrumb-link.

[afc163]

trace #4853