index.tsx

import React, { Component } from "react";
import { HashRouter, Routes, Route } from "react-router-dom";
import * as ReactDOM from "react-dom";
import Repositories from "./Repositories";
import Overview from "./Overview";
import BuildPipelines from "./BuildPipelines";
import ReleasePipelines from "./ReleasePipelines";
import "azure-devops-ui/Core/override.css";

import * as SDK from "azure-devops-extension-sdk";
import { USE_AZDO_SDK } from "./services/Environment";

class App extends Component {
    render() {
        return (
            <HashRouter>
                <div className="flex-grow">
                    <Routes>
                        <Route
                            path="/"
                            element={
                                <span className="error">
                                    No report specified.
                                </span>
                            }
                        />
                        <Route
                            path="/build-pipelines"
                            element={<BuildPipelines />}
                        />
                        <Route
                            path="/release-pipelines"
                            element={<ReleasePipelines />}
                        />
                        <Route
                            path="/repositories"
                            element={<Repositories />}
                        />
                        <Route path="/overview" element={<Overview />} />
                    </Routes>
                </div>
            </HashRouter>
        );
    }
}

if (USE_AZDO_SDK) {
    SDK.init();
    SDK.ready().then(() => {
        // eslint-disable-next-line react/no-deprecated
        ReactDOM.render(<App />, document.getElementById("root"));
        SDK.notifyLoadSucceeded();
    });
} else {
    // eslint-disable-next-line react/no-deprecated
    ReactDOM.render(<App />, document.getElementById("root"));
}