React router v4 异步路由处理

Question

考虑以下两条路线

<Route path="/:username" component={Profile} />
<Route path="*" component={NotFound} />

我知道路径/:username即使对于不存在的/:username也会始终匹配，所以我正在尝试以下操作

<Route
  path="/:username"
  render={({ match }) => {
    return userExists(match.params.username) ?
      <Profile match={match} /> : <NotFound match={match} />;
  }}
/>

userExists()是一个函数，它在调用数据库以检查具有给定用户名的用户是否存在后返回true或false 。

我是否以完全错误的方式处理这个问题？ 在我的路由处理程序中有这样一个功能感觉很有趣。

Answer 1

这没有错。 你本质上做的是呈现一个无状态的功能组件： https : //facebook.github.io/react/docs/components-and-props.html#functional-and-class-components

是否应在单独的文件中定义此功能组件取决于应用程序的整体结构和需求，但在功能组件中有条件地返回 React 元素完全没问题。

为了进一步说明 React 中函数和组件之间的对称性，请考虑将函数作为“组件”参数传递的替代方法：（注意使用带箭头函数的隐式返回）

<Route
  path="/:username"
  component={({ match }) => userExists(match.params.username) ?
      <Profile match={match} /> : <NotFound match={match} />
  }}
/>

Answer 2

由于userExists被定义为异步的，我根本看不出代码是如何“正确”的，也就是说，我认为它不会起作用，而且我认为原始问题尚未解决。