Question

考虑以下两条路线

$( document ).ready(function() {

$(document).on("click", ".temp", function() {
    $('#temperature').empty();
  $("#temperature").append(" <a class='temper' href='#'>C</a>");
});
$(document).on("click", ".temper", function() {
$('#temperature').empty();
  $("#temperature").append(" <a class='temp' href='#'>F</a>");
  });
});

我知道路径<Route path="/:username" component={Profile} /> <Route path="*" component={NotFound} />总是匹配，即使对于不存在的用户也是如此，所以我正在尝试以下

/:username

<Route path="/:username" render={({ match }) => { return userExists(match.params.username) ? <Profile match={match} /> : <NotFound match={match} />; }} />是一个函数，在调用数据库后检查具有给定用户名的用户是否存在，返回userExists()或true。

我是以完全错误的方式处理这个问题吗？在我的路由处理程序中使用这样的函数感觉很有趣。

Answer 1

没错。您实际上在做的是渲染无状态功能组件：https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-components

这取决于你的应用程序的整体结构和需求，无论这个功能组件是否应该在一个单独的文件中定义，但是在条件上返回功能组件中的React元素是完全正确的。

为了进一步说明React中函数和组件之间的对称性，请考虑将函数作为＆＃34;组件传递的替代方法。 param :(注意使用带箭头函数的隐式返回）

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

Answer 2

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

React router v4异步路由处理

2 个答案: