ReactJS：在道具中使用链接而不是标签

Question

当 API 向前端发送错误时，我想使用 react-router-dom 内部的 react-router-dom 组件中的 Link 而不是 a-tag。这可能吗？

React 中的代码：

{
    errors.activateAccount && (
        <div className="invalid-feedback" dangerouslySetInnerHTML={{__html: 
    errors.activateAccount}}/>
     )
}

来自 API 的响应：

if (!user.activated) {
  errors.activateAccount = 'Here comes the error message with a <a href="/">link</a>.';
  return res.status(400).send(errors);
}

Answer 1

在我看来，通过后端执行此操作不是一个好选择，您可以简单地传递一条消息并处理它在前端应用程序中的外观，在这种情况下，使用 React。

来自 API 的响应：

if (!user.activated) {
  errors.activateAccount = 'Simple Message';
  return res.status(400).send(errors);
}

在 React App 中，您可以获取响应并在您的组件中执行此操作。

// inside render() Method
render() {
  if(errors.activateAccount.length > 0){
    // Now you return the message composed in Link Component.
    return <Link>{errors.activateAccount.message}</Link>
  } else {
    // Now you return your default component or anything you want
  }
}