Программно перемещайтесь по реагирующему маршрутизатору 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;