在 React 中有条件地启用路由答案

【问题标题】：Conditionally enable Route in React在 React 中有条件地启用路由
【发布时间】：2020-12-10 10:24:22
【问题描述】：

我创建了一个 <Authorise /> 组件，它根据布尔“允许”属性呈现“是”或“否”属性。

export const Authorise = ({
  allow = false,
  yes = () => null,
  no = () => null
}) => (allow ? yes() : no());

<Authorise /> 组件按预期工作，但是当我尝试渲染 <Route /> 时，只渲染第一个路由，而忽略其余的 <Route /> 组件。

为什么会这样？如果我在<Authorise /> 组件之外渲染路由，它可以正常工作。只有当通过<Authorise /> 组件渲染组件时它才不起作用，我不知道为什么。

查看我的示例以查看问题： CodeSandbox

【问题讨论】：

【解决方案1】：

因为
https://reactrouter.com/web/api/Switch/children-node

<Switch> 的所有子元素都应该是 <Route> 或 <Redirect> 元素。只有第一个匹配当前位置的子节点才会被渲染。

如果您正在使用库但不按其规则行事，那么预期会发生这样的事情。

【讨论】：

【解决方案2】：

问题不在于您的 Authorize 功能，而是因为 Route 组件仅在路径匹配时才会显示。第二个问题是Switch，这将使它只显示第一个匹配的路由

添加 Switch 后，“/”路径将始终被命中，因为它是第一个。如果您尝试移除您的 Switch（或在末尾使用“/”移动路线）并转到本地开发人员的“/next”，则将显示 /next 路线

【讨论】：

如果您查看我的 Codesandbox，它清楚地表明情况并非如此。即使路由匹配，也不会渲染路由。如果您将 Route 从授权组件中取出并将其放在 switch 中，它就可以工作。