Router Tabs and Modal Routes

modal-route.jsx

import React, { Component } from "react";
import { Switch, Route, Link } from "react-router-dom";
import "./app.css";

const Home = () => <div>You're on the Home Tab</div>;
const Photo = ({ location }) => {
  const { state = {} } = location;
  const { modal } = state;
  return (
    <div className={modal ? "modal" : undefined}>
      {modal && <Link to="/">Close</Link>}
      <div>
        <img src="https://source.unsplash.com/random" />
      </div>
    </div>
  );
};
class App extends Component {
  render() {
    return (
      <div>
        <div className="links">
          <Link to="/" className="link">
            Home
          </Link>
          <Link
            to={{
              pathname: "/photo",
              state: { modal: true },
            }}
            className="link"
          >
            View Photo
          </Link>
        </div>
        <div className="tabs">
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/photo" component={Photo} />
          </Switch>
        </div>
      </div>
    );
  }
}
export default App;

router-tabs.jsx

import "@reach/tabs/styles.css";
import "./styles.css";
import React from "react";
import ReactDOM from "react-dom";
import { Location } from "@reach/router";
import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@reach/tabs";

function App({ location, navigate }) {
  const tabs = ["html", "css", "javascript"];
  const index = tabs.indexOf(location.search.substr(1));
  const onTabsChange = index =>
    navigate(`/?${tabs[index]}`, { replace: false });

  return (
    <div>
      <h1>Reach Tabs + Routing</h1>
      <p>Controlled components + routing state = :D</p>
      <Tabs index={index === -1 ? 0 : index} onChange={onTabsChange}>
        <TabList>
          <Tab>HTML</Tab>
          <Tab>CSS</Tab>
          <Tab>JavaScript</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>
            <h2>HTML</h2>
            <p>The Structure</p>
            <p>The Skeleton</p>
          </TabPanel>
          <TabPanel>
            <h2>CSS</h2>
            <p>The Styling</p>
            <p>The Clothing</p>
          </TabPanel>
          <TabPanel>
            <h2>JavaScript</h2>
            <p>The Logic</p>
            <p>The Brains</p>
          </TabPanel>
        </TabPanels>
      </Tabs>
    </div>
  );
}

const Root = () => (
  // in the future we'll have `useLocation()` and this whole
  // `Roote` component isn't needed anymore
  <Location>
    {({ location, navigate }) => (
      <App location={location} navigate={navigate} />
    )}
  </Location>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<Root />, rootElement);