Enable TAB URL

[derrickluyen]

Tried to implement using the below section of code.

import React, { Component } from "react"
import Layout from "../../components/layout"
import PageHeader from "../../components/page_header"
import { Segment, Tab } from "semantic-ui-react"
import "katex/dist/katex.min.css"
import "./pedagogic_modules.css"

import WorkAndSpeed from "./include_single_core_computing/work_and_speed"
import TimeSharing from "./include_single_core_computing/time_sharing"
import Memory from "./include_single_core_computing/memory"
import IO from "./include_single_core_computing/io"
import Capstone from "./include_single_core_computing/capstone"
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

class SingleCoreComputing extends Component {

  render() {
    const module = "A.1"
    const panes = [
      {
        menuItem: {
          key: "work_and_speed",
          content: "Work and Speed",
          to: "/work_and_speed"
        },
        pane: (
          <Route path="/work_and_speed"
                 render={() => (<Tab.Pane><WorkAndSpeed module={module} tab={"work_and_speed"}/></Tab.Pane>)}
          />
        )
      },
      {
        menuItem: {
          key: "time_sharing",
          content: "Time Sharing",
          to: "/time_sharing"
        },
        pane: (
          <Route path="/time_sharing"
                 render={() => (<Tab.Pane><TimeSharing module={module} tab={"time_sharing"}/></Tab.Pane>)}
          />
        )
      },
      {
        menuItem: {
          key: "memory",
          content: "Memory",
          to: "/memory"
        },
        pane: (
          <Route path="/memory"
                 render={() => (<Tab.Pane><Memory module={module} tab={"memory"}/></Tab.Pane>)}
          />
        )
      },
      {
        menuItem: {
          key: "io",
          content: "I/O",
          to: "/io"
        },
        pane: (
          <Route path="/io"
                 render={() => (<Tab.Pane><IO module={module} tab={"io"}/></Tab.Pane>)}
          />
        )
      },
      {
        menuItem: {
          key: "capstone",
          content: "Capstone",
          to: "/capstone"
        },
        pane: (
          <Route path="/capstone"
                 render={() => (<Tab.Pane><Capstone module={module} tab={"capstone"}/></Tab.Pane>)}
          />
        )
      },
    ]

    return (
      <Layout>
        <PageHeader title="A.1. Single-core Computing"/>

        <Segment style={{ marginBottom: "2em" }}>
          The goal of this module is to provide you with basic knowledge about sequential computing (i.e., running a
          program on a single core).
          <br/><br/>
          There is a lot of complexity under the cover, which belongs in Computer Architecture and Operating Systems{" "}
          <a className="link" href="/textbooks"> textbooks </a> . Instead, we take a high-level approach, with a focus on
          performance.
          <br/><br/>
          Go through the tabs below in sequence…
        </Segment>

        <Router>
          <div className="App" style={{ margin: "50px" }}>
            <Switch>
              <Tab className="tab-panes" renderActiveOnly={false} activeIndex={-1} panes={panes}
              />
            </Switch>
          </div>
        </Router>
      </Layout>
    );
  }

}

ReactDOM.render(<SingleCoreComputing />, document.getElementById("___gatsby"));

Main changes from original code:

• converted SingleCoreComputing into a class that extends Component, thus making a render method necessary
• adding to field to menuItems and adding the pane field with Route tag + path for each pane
• adding Router and Switch tags around the Tab tag
• use ReactDOM render (also tried hydrate) and get the component with id ___gatsby (equivalent to root)

This approach did not work and resulted in the below error. I tried resolving the error with gatsby clean to clear cache, changing useStaticQuery in layout.js by creating a custom Header in header.js that used StaticQuery, and a couple of other things that all led back to this same error.