以编程方式使用react路由器v4导航并将jsx传递给目标组件

Question

我有一个组件，显示道具提供的信息。

有没有办法以编程方式导航到此组件并传递给他 jsx 代码？

使用简单的字符串（而不是jsx），我会做类似以下的事情：

this.props.history.push("/mycomponent", { message: "Just a text" });

并在目标组件中：

const {message} = this.props.location.state;

但是，如果我在message中包含任何jsx节点，即。 Smiley <i className="far fa-smile"/>它显示为纯文本。

除了使用dangerouslySetInnerHTML之外，还有什么办法可以实现这个目标吗？如果不是在这种情况下使用它是否安全？

class MyComponent extends Component {
    returnMessage = () => {
        // this.props.location.state.message = 'Smiley <i className="far fa-smile"/>'
        return {__html: this.props.location.state.message};
    }
    render() {
      return <div dangerouslySetInnerHTML={returnMessage()} />;
    }
}

export default MyComponent;