Route.tsx

import React from "react";

// yea
import axios from "axios";
import {render} from "react-dom";
import {setStylesTarget} from "typestyle";

import {Provider} from "reactivated/context";
// nope

interface Props {
    className?: string;
    href: string;
}

export class Route extends React.Component<Props> {
    onClick: React.MouseEventHandler<HTMLAnchorElement> = async (event) => {
        event.preventDefault();
        const href = this.props.href;
        const response = await axios.get(href, {
            headers: {
                "X-Requested-With": "XMLHttpRequest",
            },
        });

        (window as any).__PRELOADED_PROPS__ = response.data.props;
        (window as any).__PRELOADED_CONTEXT__ = response.data.context;

        const props = (window as any).__PRELOADED_PROPS__;
        const context = (window as any).__PRELOADED_CONTEXT__;

        const Template = require("client/templates/" + context.template_name + ".tsx")
            .default;

        render(
            <Provider value={context}>
                <Template {...props} />
            </Provider>,
            document.getElementById("root"),
        );
        history.pushState({isReactivated: true}, "", href);
    };

    render() {
        const {props} = this;

        return (
            <a onClick={this.onClick} href={props.href}>
                {props.children}
            </a>
        );
    }
}