不幸的是，react-router 的Switch组件不适用于嵌套在您的示例中的其他组件中的路由。如果您查看Switch 的文档，它会说：

<Switch> 的所有子元素都应该是 <Route> 或 <Redirect> 元素。

...所以您的Authorize组件作为Switch.

如果您通读了 Switch 组件的源代码，您会发现它相当邪恶地读取每个子组件的 props 并手动将 react-router 的matchPath方法应用于每个子组件的path(or from) prop 以确定应该使用哪个组件呈现。

所以，在你的情况下发生的事情是Switch遍历它的孩子，直到它到达你的Authorize组件。然后查看该组件的 props，没有找到 apath或fromprop，并调用matchPath未定义的路径。正如您自己指出的那样，“没有路径的 <Route> 总是匹配”，因此matchPath返回 true，并且 Switch 呈现您的Authorize组件（忽略任何后续的路由或重定向，因为它认为它找到了匹配项）。Authorize但是，组件中嵌套的“/admin”路由与当前路径不匹配，因此您会从渲染中获得空结果。

我在工作中也面临着类似的情况。我解决这个问题的计划是Switch用一个自定义组件替换我的路由代码中的react-router ，该组件遍历其子组件，依次手动渲染每个组件，并返回第一个返回非空值的结果。当我试一试时，我会更新这个答案。

编辑：嗯，那没有用。我无法找到一种受支持的方法来手动调用孩子的“渲染”。抱歉，我无法为您提供解决Switch的限制的方法。

万一有人在 >= 2019 中读到这个，处理这种行为的一种方法是简单地包装 Route 组件，如下所示：

import React from 'react'
import { Route } from 'react-router-dom'

type Props = {
  permissions: string[]
  componentWhenNotAuthorized?: React.ElementType
}

const AuthorizedRoute: React.FunctionComponent<Props> = ({
  permissions,
  componentWhenNotAuthorized: ComponentWhenNotAuthorized,
  ...rest
}) => {
  const isAuthorized = someFancyAuthorizationLogic(permissions)

  return isAuthorized
    ? <Route {...rest} />
    : ComponentWhenNotAuthorized
      ? <ComponentWhenNotAuthorized {...rest} />
      : null
}

export default AuthorizedRoute

然后，简单地使用它：

import React from 'react'
import { Route, Switch } from 'react-router-dom'
import AuthorizedRoute from 'some/path/AuthorizedRoute'
import Account from 'some/path/Account'
import Admin from 'some/path/Admin'
import Dashboard from 'some/path/Dashboard'
import NotFound from 'some/path/NotFound'
import Users from 'some/path/Users'

const AppRouter: React.FunctionComponent = () => (
  <Switch>
    <Route
      component={Account}
      path='/accounts'
    />
    <AuthorizedRoute
      component={Admin}
      componentWhenNotAuthorized={NotFound}
      path='/admin'
      permissions={['view-admin']}
    />
    <Route
      component={Dashboard}
      path='/dashboard'
    />
    <Route
      component={Users}
      path='/users'
    />
    <Route
      component={NotFound}
    />
  </Switch>
)

export default AppRouter

与罗伯特所说的相似，这就是我是如何做到的

class NullComponent extends React.Component {
  shouldComponentBeRenderedByRoute() {
    return false;
  }

  render() {
    return null;
  }
}

class CustomSwitch extends React.Component {
  render() {
    return (
      // React.Children.map returns components even for null, which 
      const children = React.Children.toArray(this.props.children).map(child => {
        const { render, shouldComponentBeRenderedByRoute } = child.type.prototype;
        if (shouldComponentBeRenderedByRoute && !shouldComponentBeRenderedByRoute.call(child)) {
         return null;
        }

        if (shouldComponentBeRenderedByRoute) {
          return render.call(child);
        }

        return child;
      });

      return <Switch>{children}</Switch>;
    );
  }
}

然后使用它只是做

<CustomSwitch>
  <Route path... />
  <NullComponent />
  <Route path... />
</CustomSwitch>

在这里，一个没有shouldComponentBeRenderedByRoute功能的组件被假定为一个有效的 Route 组件react-router，但您可以添加更多条件（可能使用路径props）来检查它是否是一个有效的 Route