我创建了一个<Authorise />组件，该组件基于布尔值"allowed"道具呈现"yes"或"no"道具。
export const Authorise = ({
allow = false,
yes = () => null,
no = () => null
}) => (allow ? yes() : no());
<Authorise />组件按预期工作，但是当我尝试渲染<Route />时，只渲染第一个路由，而忽略其余的<Route />组件。
为什么会发生这种情况？如果我在<Authorise />组件之外渲染路由，它可以正常工作。只有当通过<Authorise />组件渲染组件时，它才不起作用，我也不知道为什么。
查看我的示例以查看问题：代码沙盒
这是因为
https://reactrouter.com/web/api/Switch/children-node
<Switch>的所有子元素都应该是<Route>或<Redirect>元素。将仅渲染与当前位置匹配的第一个子对象。
如果你正在使用一个库，但没有按照它的规则玩，那么这样的事情就是预期发生的。
问题不在于Authorize函数，而是因为只有在路径匹配时才会显示路由组件。第二个问题是Switch，它将使只有第一条匹配的路线显示
随着Switch的加入/"路径总是会被击中，因为它是第一个。如果您试图移除Switch(或移动末尾带有"/"的路由(并转到"/"/下一个"；在您的本地dev上，然后/下一条路线将显示